Question

我正在使用vue.config.js覆盖Webpack配置：

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath: 'http://0.0.0.0:8080',
  outputDir: './dist/',

  chainWebpack: config => {

    config.optimization
      .splitChunks(false)

    config
      .plugin('BundleTracker')
      .use(BundleTracker, [{ filename: './webpack-stats.json' }])

    config.resolve.alias
      .set('__STATIC__', 'static')

    config.devServer
      .public('http://0.0.0.0:8080')
      .host('0.0.0.0')
      .port(8080)
      .hotOnly(true)
      .watchOptions({ poll: 1000 })
      .https(false)
      .headers({ "Access-Control-Allow-Origin": ["*"] })
  }
};

webpack-bundle-tracker插件生成一个名为webpack-stats.json的文件：

{
  "status": "done",
  "publicPath": "http://0.0.0.0:8080/",
  "chunks": {
    "app": [
      {
        "name": "app.js",
        "publicPath": "http://0.0.0.0:8080/app.js",
        "path": "/Users/me/dev/vue-app/dist/app.js"
      }
    ]
  }
}

我的问题是，取决于我是在开发中还是生产中，我希望文件的路径不同。

当我运行npm run serve时：生成的路径应为http://0.0.0.0:8080/app.js（这样文件将由npm提供服务，并且我可以进行热重装等）
运行npm run build时：生成的路径应为http://0.0.0.0:8000/static/app.js（以便django可以提供文件。请注意端口号8000，而不是8080）

所以我想知道vue.config.js是否有两种版本，serve将使用一个版本，build将使用另一个版本。

Answer 1

我知道这个问题已经两年了。使用环境变量 VUE_CLI_SERVICE_CONFIG_PATH 的绝对路径。您可以使用 $PWD 代替当前绝对路径。

// package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "serve:test": "env VUE_CLI_SERVICE_CONFIG_PATH=\"/var/www/html/your_project/vue.config_serve_test.js\" vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

npm run serve:test 将使用 vue.config_serve_test.js

npm run build 将使用 vue.config.js

用于npm run serve和npm run build的不同vue.config.js

1 个答案: