配置 Vue 以进行开发和生产构建

Question

我继承了一个 Vue 项目，它只构建生产版本并丑化所有内容。它没有像我习惯的那样有 webpack.config.js，它只有一个 vue.config.js 文件。当我这样做时，npm run build它就会构建一个产品。构建命令是"build": "vue-cli-service build"，我没有看到一种方法可以做类似的事情--mode=development。

我尝试添加一个构建的 webpack.config.js 文件，但同时破坏了网页，因为它不再构建相同的文件。

这是我的 vue.config.js 文件：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
    lintOnSave: true,
    baseUrl: 'http://localhost:8080',
    configureWebpack: {
        entry: './src/main.js',
        module: {
            rules: [
                {
                    test: /libs\.js$/,
                    use: {
                        loader: 'script-loader'
                    }
                },
                {
                    test: /angLibs\.js$/,
                    use: {
                        loader: 'script-loader'
                    }
                },
                {
                    test: /welcome\.js$/,
                    use: {
                        loader: 'script-loader'
                    }
                },
                {
                    test: /app\.js$/,
                    use: {
                        loader: 'script-loader'
                    }
                }
            ]

        },
        output: {
            publicPath: process.env.VUE_APP_ROOT_API + '/',
            chunkFilename: '[name].bundle.js'
        },
        plugins: [
            new CopyWebpackPlugin([
                { from: path.resolve(__dirname, './static/App/i18n/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
            ], { copyUnmodified: true, context: 'static/' }),
            new CopyWebpackPlugin([
                { from: path.resolve(__dirname, './static/Content/*/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
            ], { copyUnmodified: true, context: 'static/' }),
            new CopyWebpackPlugin([
                { from: path.resolve(__dirname, './static/fonts/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
            ], { copyUnmodified: true, context: 'static/' }),
            new CopyWebpackPlugin([
                { from: path.resolve(__dirname, './static/react/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
            ], { copyUnmodified: true, context: 'static/' })
        ]
    }
};

我希望有一个更快且不会丑化/缩小的开发构建（或保留 webpack 中包含的文件的映射文件）。

Answer 1

这是 Vue CLI v3 版本。对于具有热重载功能的 webpack 开发服务器，请使用npm run serve.

development否则，您可以通过以下方式构建模式

npx vue-cli-service build --mode development

或者，如果你没有npx

./node_modules/.bin/vue-cli-service build --mode development

请参阅https://cli.vuejs.org/guide/mode-and-env.html

另一种选择是添加一个新脚本package.json，例如

"buildDev": "vue-cli-service build --mode development"

并运行

npm run buildDev

有关配置 Webpack，请参阅https://cli.vuejs.org/guide/webpack.html。

例如

// vue.config.js
module.exports = {
  configureWebpack: {
    // config goes here
  }
}