vue项目中运用webpack动态配置打包多种环境域名的方法

为了在Vue项目中运用Webpack动态配置打包多种环境的域名，可以通过以下步骤来进行操作：

配置Webpack
在Vue项目中，使用Webpack来进行依赖管理和编译。为了能够在多个不同的环境中工作，我们需要从webpack.config.js文件中读取当前环境的配置信息，以便根据不同的环境变量来编译不同的代码。具体操作包括：

在Webpack配置文件中，使用“DefinePlugin”插件来定义一个全局变量来保存当前环境

const webpack = require('webpack')
const env = process.env.NODE_ENV || 'development'
const envConfig = require(`./config/${env}.env.js`) || {}
module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': Object.assign({}, envConfig)
    })
  ]
}

编写环境变量的配置文件
为了能够动态地配置不同的环境变量，我们可以创建一个config文件夹，并在其中分别创建development.env.js、testing.env.js和production.env.js等不同环境配置文件，用来存储各个环境的变量配置信息。具体操作包括：

// config/development.env.js
module.exports = {
MODE: 'development',
BASE_API: 'http://dev.api.example.com',
APP_VERSION: '1.0.0'
}

// config/testing.env.js
module.exports = {
MODE: 'testing',
BASE_API: 'http://test.api.example.com',
APP_VERSION: '1.1.1'
}

// config/production.env.js
module.exports = {
MODE: 'production',
BASE_API: 'http://api.example.com',
APP_VERSION: '2.0.0'
}

编写Vue项目中的相关代码
在Vue项目中，我们需要引用定义的环境变量，用于动态修改代码。具体操作包括：

// src/main.js
console.log(process.env.MODE) // 动态输出环境变量

// src/config.js
export default {
baseApi: process.env.BASE_API,
appVersion: process.env.APP_VERSION
}

运行上述代码，在控制台中输出环境变量，显示不同环境中值不同，符合预期。

上面的是基本的动态配置方案，下面再给出两个示例说明：

1.动态配置多个环境变量
在实际项目开发中，可能会存在需要设置多个不同的环境变量，因此，需要在config文件夹中创建多个环境文件，如：

// config/prod.env.js
module.exports = {
NODE_ENV: '"production"',
API_HOST: '"/api/prod/"',
IMAGE_URL: '"http://image.prod.com"',
STATIC_URL: '"http://static.prod.com"'
}

// config/testing.env.js
module.exports = {
NODE_ENV: '"development"',
API_HOST: '"/api/test/"',
IMAGE_URL: '"http://image.test.com"',
STATIC_URL: '"http://static.test.com"'
}
在webpack配置文件中修改：

// webpack.base.conf.js
const env = require('../config/'+process.env.NODE_ENV+'.env');

// webpack.prod.conf.js 和 webpack.dev.conf.js
plugins:[
new webpack.DefinePlugin({
'process.env':JSON.stringify(env)
})
]
2.动态注入页面变量
通过Webpack我们还可以被动态注入一些CSS等变量，在我们VUE中会用到变量，可以通过以下方式来实现：

// webpack.base.conf.js
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new HtmlWebpackPlugin({
favicon:'src/assets/images/favicon.ico',
template: './index.html',
filename:'index.html',
title: 'Hello World app',
inject:true,
hash:true
}),
new HtmlWebpackExcludeAssetsPlugin(),
// 全局标识，webpack解析时若遇到此标识，会使用后面定义的值替换此标识
new webpack.DefinePlugin({
APP_CONFIG: require('./env.' + env + '.js')
})
],