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

Question

我了解如何控制publicPath将基于process.env.NODE_ENV变量。我的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

如果你需要基于环境的条件行为，你可以使用一个函数并改变其中的值，或者返回一个将被合并的对象。

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

查看更多:configureWebpack