Question

在build \ webpack.base.conf.js中这有效：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'api-client': process.env.VUE_APP_API_CLIENT === 'mock'
            ? resolve('src/api/mock')
            : resolve('src/api/server')
    }
  },

这不是：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'api-client': resolve('src/api/' + process.env.VUE_APP_API_CLIENT)
    }
  },

运行npm run dev时的错误是

This dependency was not found:
* api-client in ./src/store/index.js

这里是config\prod.env.js：

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  VUE_APP_API_CLIENT: '"server"'
}

和config\dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_APP_API_CLIENT: '"mock"'
})

如何像第一个代码示例中一样使用环境变量？

谢谢。

Answer 1

在加载config/dev.env.js之后，似乎分别在config/prod.env.js和webpack.dev.conf.js中加载了webpack.prod.conf.js和webpack.base.conf，因此我声明了env变量我在webpack.base.conf中设置别名时不知道。奇怪的是，process.env.NODE_ENV在那个地方并不陌生，所以我最终使用了它：

const isProduction = process.env.NODE_ENV === 'production'

然后将别名声明为：

alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'api-client': resolve(`src/api/${isProduction ? 'server' : 'mock'}`)
}

无法使用process.env变量在Webpack中设置别名

1 个答案: