详解vue.js根据不同环境(正式、测试)打包到不同目录

要根据不同环境(正式、测试)打包到不同目录，我们可以使用webpack进行配置。

首先，在项目根目录下创建一个config文件夹，里面创建三个文件：dev.env.js、prod.env.js、index.js。

dev.env.js文件内容如下：

module.exports = {
    NODE_ENV: '"development"',
    API_HOST: '"http://localhost:8080"' //定义测试环境的API地址
}

prod.env.js文件内容如下：

module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"http://www.example.com"' //定义正式环境的API地址
}

index.js文件内容如下：

let env = process.env.NODE_ENV === 'production' ? require('./prod.env') : require('./dev.env')
module.exports = Object.assign({
    API_HOST: env.API_HOST, //通过引入不同环境的env文件，获取API地址
}, env)

接着，在webpack.prod.conf.js中引用我们刚刚创建的index.js文件：

const webpack = require('webpack')
const env = require('../config/index')

module.exports = {
    //...
    //根据环境的不同配置不同的打包目录
    output: {
        path: env.NODE_ENV === 'production' ? config.build.assetsRoot : config.dev.assetsRoot,
        filename: '[name].js',
        publicPath: env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': env
        }),
        //...
    ]
    //...
}

最后，在代码中使用process.env.API_HOST获取API地址即可，并且打包时使用npm run dev或npm run build指定环境。比如，我们可以在package.json文件中添加以下配置：

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build:test": "cross-env NODE_ENV=development webpack --progress --hide-modules --config build/webpack.prod.conf.js",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.prod.conf.js",
    //...
 }

这样，当我们执行npm run build:test时，代码将会按照测试环境的配置打包到指定目录中；当执行npm run build时，则会按照正式环境的配置打包到相应目录中。

示例：
例如，在代码中需要获取API地址，我们可以这样写：

const API_HOST = process.env.API_HOST

可以在不同环境中输出不同的结果：

在测试环境中，API_HOST的值是http://localhost:8080；
在正式环境中，API_HOST的值是http://www.example.com。

这样就能在不同环境中正确获取API地址，实现不同环境的打包了。