Vue在生产环境中的DEV模式

Posted 2023-02-22

【中文标题】Vue在生产环境中的DEV模式

【英文标题】：Vue in DEV mode in production environment

【发布时间】：2018-06-05 11:11:42

【问题描述】：

版本 2.5.13

源代码链接 https://jsfiddle.net/esrgxLfu/

说明 我有一个 php 应用程序，它主要将 Vue JS 用于设置页面。所有设置都是用 Vue 创建的，我们使用 Webpack。一切正常，当我们在实时版本中时，没有关于 Vue 处于开发模式的控制台错误。我们也仅将 Vue 用于仪表板页面上的一个组件。它是一个 Vue TODO 列表，类似于 Vue 文档中的列表。在仪表板页面上，我们得到 Vue 处于开发模式的控制台消息。我们对仪表板和设置页面使用相同的 Webpack，因此设置相同。 我已经寻找了几个小时试图找到答案，但我没有成功，这就是我创建这个问题的原因。

在 php 文件中，我们有这个放置 vue 组件的地方：

<div id="vue-tasks"></div>

然后我们包含了 javascript 文件和变量。

你可以看到小提琴中使用的所有东西，但我真的不认为我可以让这个重现，如果你不能帮助我，我很抱歉，但它使用了一堆来自 PHP Symfony 和 twig 的东西所以我不确定我能做什么。

会发生什么？ Vue 将处于生产模式。

实际发生了什么？ Vue 在开发环境中。

Webpack 配置

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = 
    entry: 
         dashboard: [
            './assets/js/pages/dashboard.js' // Dashboard is the part where we have this issue and the JS is in the fiddle I provided above.
        ],
        settings: [
            './assets/js/pages/settings/main.js'
        ]
    ,
    output: 
        filename: process.env.NODE_ENV === 'production' ? 'js/[name].[chunkhash].js' : 'js/[name].js',
        path: path.resolve(__dirname, 'web/dist'),
        publicPath: '/dist/'
    ,
    module: 
        rules: [
            
                test: /\.(png|jpg|gif)$/,
                use: [
                    
                        loader: 'file-loader',
                        options: 
                            name: '[name].[ext]',
                            outputPath: 'images/'
                        
                    
                ]
            ,
            
                test: /\.js$/,
                include: path.resolve(__dirname, "assets"),
                use: ['babel-loader']
            ,
            
                test: /\.(woff2?|ttf|eot|svg)$/,
                loader: 'url-loader?limit=10000&name=fonts/[name].[ext]'
            ,
            
                test: /\.scss$/,
                include: path.resolve(__dirname, "assets"),
                use: ExtractTextPlugin.extract(
                    fallback: 'style-loader',
                    use: ['css-loader','resolve-url-loader','sass-loader?sourceMap']
                )
            ,
            
                test: /\.css$/,
                use: ExtractTextPlugin.extract(
                    fallback: 'style-loader',
                    use: ['css-loader','resolve-url-loader']
                )
            ,
            
                test: /\.vue$/,
                loader: 'vue-loader',
                options: 
                    loaders: 
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    
                
            ,
        ]
    ,
    resolve: 
        alias: 
            jquery: "jquery/src/jquery",
            'vue$': 'vue/dist/vue.esm.js'
        
    ,
    plugins: [
        new ExtractTextPlugin(
            filename: process.env.NODE_ENV === 'production' ? 'css/[name].[chunkhash].css' : 'css/[name].css'
        ),
        new webpack.ProvidePlugin(
            '$': 'jquery',
            'jQuery': 'jquery'
        ),
        new WebpackMd5Hash(),
        new ManifestPlugin(
            basePath: '/dist/'
        )
    ],
    performance: 
        hints: false
    ,
    devtool: 'source-map'
;

if (process.env.NODE_ENV === 'production') 
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin(
            'process.env': 
                NODE_ENV: '"production"'
            
        ),
        new webpack.optimize.UglifyJsPlugin(
            minimize: true,
            comments: false,
            compress: 
                warnings: false
            
        ),
        new webpack.LoaderOptionsPlugin(
            minimize: true
        ),
        new CleanWebpackPlugin('dist' , 
            root: path.resolve(__dirname, "web"),
            verbose: true,
            dry: false
        )
    ])

这也是我在控制台中收到的消息。

您正在开发模式下运行 Vue。确保开启 部署生产时的生产模式。查看更多提示 https://vuejs.org/guide/deployment.html

【问题讨论】：

我假设您已经通过将NODE_ENV 设置为production 并运行您的构建脚本对此进行了测试？

是的，当我们为生产构建时，NODE_ENV 设置为 production

您是否添加了类似console.log 的内容来验证您的process.env.NODE_ENV 的if 语句是否被调用？

之所以调用它，是因为正如我提到的，设置页面可以正常工作并且处于生产模式，但只有仪表板页面存在此问题，并且它们使用相同的配置。

你在 package.json 中的构建脚本是什么？你在运行npm run production 或npm run dev 之类的东西吗？

【参考方案1】：

看起来您正在使用浏览器脚本标签而不是作为构建系统的捆绑包的一部分来选择 Vue。

将其更改为链接到 Vue 的生产版本将解决该问题。例如，在您的 jsfiddle 中，将脚本链接替换为 https://unpkg.com/vue/dist/vue.min.js。