운영 환경에서 DEV 모드의 Vue

운영 환경에서 DEV 모드의 Vue

버전 2.5.13

소스 코드 링크 https://jsfiddle.net/esrgxLfu/

설명 설정 페이지에서 주로 Vue JS를 사용하는 PHP 어플리케이션이 있습니다.모든 설정은 Vue를 사용하여 생성되며 웹 팩을 사용합니다.모든 것이 정상적으로 동작하며 라이브 버전에서는 Vue가 개발 모드라는 콘솔 오류는 발생하지 않습니다.또한 대시보드 페이지의 한 구성 요소에만 Vue를 사용합니다.이것은 Vue 설명서에 나와 있는 것과 같은 Vue TODO 목록입니다.대시보드 페이지에 Vue가 개발 모드에 있다는 콘솔 메시지가 표시됩니다.대시보드 및 설정 페이지에 동일한 웹 팩을 사용하기 때문에 동일한 설정이 사용됩니다.답을 찾기 위해 몇 시간 동안 찾아봤지만 성공하지 못했기 때문에 이 문제를 만들고 있습니다.

php 파일에는 다음과 같은 vue 컴포넌트가 있습니다.

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

자바스크립트 파일과 변수를 포함했습니다.

바이올린에서 사용되는 모든 것을 볼 수 있지만, 재현할 수 있을 것 같지 않습니다.만약 도와주실 수 없다면 죄송합니다만, PHP Symfony와 twig의 많은 것을 사용하고 있기 때문에 무엇을 할 수 있을지 잘 모르겠습니다.

무엇을 기대합니까?Vue는 운영 모드에 있어야 합니다.

실제로 무슨 일이 일어나고 있나요?Vue는 개발 환경에 있습니다.

웹 팩 설정

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를 참조하십시오.

빌드 시스템에서 번들의 일부가 아닌 브라우저 스크립트 태그를 사용하여 Vue를 선택하는 것처럼 보입니다.

Vue의 실제 버전에 링크하도록 이 옵션을 변경하면 문제가 해결됩니다.예를 들어 jsfiddle에서 스크립트링크를https://unpkg.com/vue/dist/vue.min.js.

언급URL : https://stackoverflow.com/questions/47947587/vue-in-dev-mode-in-production-environment