Vue CLI 2升级Vue CLI 3后环境配置报错及.env.js管理咨询

Hey there, let's fix that Vue CLI 2 → 3 environment config issue you're running into! The error you're seeing makes total sense because Vue CLI 3 uses a completely different configuration structure than CLI 2—you can't just rename the old config/index.js to vue.config.js and call it a day. Here's how to properly handle your environment files and config:

First: Ditch the old config/ env files for CLI 3's native .env system #

Vue CLI 3 uses root-level .env.[mode] files instead of the config/ directory setup from CLI 2. Here's what to do:

• Move your environment variables into new files at your project root: .env.development, .env.production, .env.test (matching your old DEV/PROD/TEST env files).
• Any variable you want accessible in your Vue app must start with VUE_APP_ (this is a CLI 3 security measure). For example, if your old env had API_BASE_URL=https://dev.example.com, it becomes VUE_APP_API_BASE_URL=https://dev.example.com in the new .env.development file.
• To use a specific mode (like test), run your commands with the --mode flag:

  # Serve with test environment
  vue-cli-service serve --mode test
  # Build for test environment
  vue-cli-service build --mode test
  

Second: Migrate your old config/index.js settings to vue.config.js #

The build and dev keys from your old CLI 2 config aren't recognized in CLI 3's vue.config.js. Instead, you'll map those settings to CLI 3's native options. Here are common examples:

• Proxy configuration (from old dev.proxyTable):

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'https://dev.example.com',
          changeOrigin: true,
          pathRewrite: { '^/api': '' } // if needed
        }
      }
    }
  }
  

• Build output settings (from old build.assetsRoot, build.assetsSubDirectory):

  module.exports = {
    outputDir: 'dist', // replaces build.assetsRoot
    assetsDir: 'static' // replaces build.assetsSubDirectory
  }
  

• Source map control (from old build.productionSourceMap):

  module.exports = {
    productionSourceMap: false // disable source maps for production builds
  }
  

If you have complex env logic (beyond simple key-value pairs) #

If your old .env.js files had dynamic logic (like conditional variables based on other env vars), you can still use them by hooking into webpack's DefinePlugin in vue.config.js:

module.exports = {
  chainWebpack: config => {
    // Load your old env file based on the current mode
    const envConfig = require(`./config/${process.env.NODE_ENV}.env.js`)
    // Merge it into webpack's global process.env
    config.plugin('define').tap(args => {
      args[0]['process.env'] = { ...args[0]['process.env'], ...envConfig }
      return args
    })
  }
}

That said, if possible, stick to CLI 3's native .env files—they're simpler and align with the framework's conventions.

Quick recap to get you up and running #

1. Create .env.development, .env.production, .env.test at your project root, add VUE_APP_ prefix to all variables you need in your app.
2. Write a fresh vue.config.js with only CLI 3-supported options (proxy, outputDir, etc.)—don't reuse the old config/index.js structure.
3. Use the --mode flag when running commands to target your test environment.

内容的提问来源于stack exchange，提问作者DaveWoodall.com