在生產環境中以DEV模式運行

Question

版本 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查看更多提示

Answer 1

看起來您正在使用瀏覽器腳本標記選擇Vue，而不是從構建系統中選擇捆綁包的一部分。

將其更改為鏈接到Vue的生產版本將解決此問題。 例如，在你的jsfiddle中，用https://unpkg.com/vue/dist/vue.min.js替換腳本鏈接。