怎么解决vuejs 没有dev的问题

如果你使用vuejs进行开发，想要避免生产环境中出现潜在的错误或者优化你的应用程序，那么一定需要使用dev。但是，在生产中为了更好的性能，我们不能把dev模式打包到生产中。那么如何解决这个问题呢？以下是一些解决方案。

解决方案1：使用vue-cli生产模式

Vue-cli是一个脚手架工具，它可以创建一个vue项目。在开发过程中，Vue-cli提供了一个serve命令去启动本地开发服务器。而在生产环境中，Vue-cli通过build命令进行打包。在打包前，我们需要在配置文件vue.config.js中根据需要配置一些选项。例如，设置publicPath，以控制文件资源的路径。

    module.exports={
        publicPath: process.env.NODE_ENV==='production' ? '/your_path/' : '/',
        //...
    }
        

这样我们就可以在生产环境中使用Vue-cli进行打包了。

解决方案2：手动配置Webpack

如果你不想使用Vue-cli，可以手动配置Webpack。Webpack是一个模块化打包器，可以将所有的模块打包成一个或多个文件。在配置Webpack时，我们需要在webpack.config.js文件中进行配置。以下代码展示了如何在开发模式和生产模式下进行不同的配置。

    const webpack=require('webpack');
    const path=require('path');
    const HtmlWebpackPlugin=require('html-webpack-plugin');

    const config={
        entry: {
            app: './index.js'
        },
        output: {
            filename: '[name].[hash].js',
            path: path.resolve(__dirname, 'dist')
        },
        module: {
            rules: [
                // 处理vue文件的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'
                        }
                    }
                },
                // 处理css文件的loader
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                // 处理图片的loader
                {
                    test: /\.(png|jpg|jpeg|gif|svg)$/,
                    use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: '[name].[ext]?[hash]'
                        }
                    }]
                }
            ]
        },
        plugins: [
            // 自动生成HTML导入的js文件，并注入js和css
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: './index.html',
                inject: 'body'
            })
        ]
    };

    if (process.env.NODE_ENV==='production') {
        config.plugins.push(
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                    drop_console: true
                }
            }),
            new webpack.optimize.OccurrenceOrderPlugin()
        );
    } else {
        config.devServer={
            port: 8080,
            historyApiFallback: true,
            noInfo: true
        };
    }

    module.exports=config;
        

以上代码中，我们根据process.env.NODE_ENV的值来区分开发模式和生产模式，然后进行不同的配置。在生产模式中，我们将使用UglifyJsPlugin来压缩代码，并通过OccurrenceOrderPlugin来使得我们的代码在压缩过后文件的大小更小。在开发模式中，我们需要使用webpack-dev-server，它可以自动重新加载浏览器，因此我们可以快速构建和测试。

总结

通过使用Vue-cli和手动配置Webpack，我们可以在生产环境中使用dev，进而更好地优化和保证我们的应用程序。