你如何在 vue.config.js 中控制你的 publicPath 属性

Question

我了解如何根据 process.env.NODE_ENV 变量控制 publicPath 的内容。我的 vue.config.js 按预期工作，但仅适用于 production 和非 production 环境。当我有 qa、dev 和 stage 环境时，如何控制 publicPath 变量？

注意：我已经添加了我的 .env.qa、.env.dev 和 .env.stage。

vue.config.js:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
  ? '/ProductionEnv/'
  : '',
  "transpileDependencies": [
    "vuetify"
  ]
}

Answer 1

我会这样计算 vue.config.js 中的 publicPath：

function getPublicPath() {
  switch (process.env.NODE_ENV) {
    case 'production': return '/ProductionEnv/'
    case 'qa': return '/QaEnv/'
    case 'dev': return '/DevEnv/'
    case 'stage': return '/StageEnv/'
    default: return ''
  }
}

module.exports = {
  publicPath: getPublicPath()
}

Answer 2

如果您需要基于环境的条件行为，您可以使用一个函数并改变内部的值，或者return一个将被合并的对象。

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}

在此处查看更多内容：configureWebpack

你如何在 vue.config.js 中控制你的 publicPath 属性

How do you control your publicPath property in vue.config.js

vue.js

vue-cli