Vue.js多环境打包配置:实现测试与正式环境输出到不同目录
本文详解如何在Vue.js项目中通过修改Webpack配置,实现测试环境与正式环境打包输出到不同目录。通过新建testing.js、修改prod.env.js及index.js,并调整webpack.prod.conf中的filename和output路径,最终通过npm run testing命令生成独立的testing文件夹,确保测试与正式构建互不干扰。
创建测试环境构建脚本
首先,在项目的build文件夹下新建一个名为testing.js的文件。
// 配置环境变量 type 为 testing
process.env.type = '"testing"'
// 引入build.js文件
require('./build')
配置环境变量
接着,修改config文件夹下的prod.env.js文件,在其中添加type环境变量配置,将process.env.type的值赋给type属性,以便后续构建脚本识别当前环境类型。
module.exports = {
NODE_ENV: '"production"',
// 将上文设置的环境变量,赋值到 type 属性上
type: process.env.type
}
添加NPM构建命令
然后,在package.json文件中添加一个新的npm脚本命令。具体操作是添加一个名为testing的命令,其执行内容为node build/testing.js,用于触发测试环境的构建流程。
"testing": "node build/testing.js", // 添加testing命令
"build": "node build/build.js"
定义测试环境配置块
接下来,修改config/index.js文件。为了支持打包到不同的文件夹,需要将原有的build配置块复制一份,并重命名为testing配置块,用于定义测试环境特有的构建参数。
build: {
env: require('./prod.env'),
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/mshop/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
testing: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../testing/index.html'),
assetsRoot: path.resolve(__dirname, '../testing'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
修改Webpack构建配置
随后,进入build文件夹,修改webpack.prod.conf.js文件,针对测试环境和正式环境进行差异化配置。
首先修改HtmlWebpackPlugin的配置,将filename属性根据process.env.type的值动态指向config.testing.index或config.build.index,确保生成的HTML文件路径正确。
new HtmlWebpackPlugin({
filename: process.env.type == '"testing"' ? config.testing.index : config.build.index
}),
接着修改output配置,将path属性根据process.env.type的值动态指向config.testing.assetsRoot或config.build.assetsRoot,从而决定打包输出的根目录。
output: {
path: process.env.type == '"testing"' ? config.testing.assetsRoot : config.build.assetsRoot,
},
之后,修改build文件夹下的build.js文件,以处理构建前的清理工作。
在build.js中,需要修改清理路径的逻辑。根据process.env.type的值判断是测试环境还是正式环境,分别获取对应的assetsRoot和assetsSubDirectory路径。这样在执行npm run testing或npm run build时,输出的文件目录才不会混淆。
具体的代码实现如下所示:
rm(path.join(process.env.type == '"testing"' ? config.testing.assetsRoot : config.build.assetsRoot, process.env.type == '"testing"' ? config.testing.assetsSubDirectory : config.build.assetsSubDirectory), err => {
配置环境域名地址
最后,根据不同环境配置相应的API域名地址。在代码中根据NODE_ENV和type变量判断当前是本地、测试还是正式环境,并设置对应的baseUrl。
let baseURL
if (process.env.NODE_ENV === 'production') {
if (process.env.type === 'testing') { // 测试环境
baseUrl = '测试环境地址'
} else { // 正式环境
baseUrl = '正式环境地址'
}
} else { // 本地环境
baseUrl = '本地环境地址'
}
完成上述配置后,即可执行构建命令。
执行npm run testing命令时,系统会读取测试环境配置,生成对应的testing文件夹;而执行npm run build命令时,则使用正式环境配置,生成dist文件夹。
以上就是在Vue.js项目中配置多环境打包到不同目录的完整步骤,希望能为您的项目开发提供便利。
Vue.js 是什么:渐进式 JavaScript 框架的核心优势与适用场景
2026-11-03 20:00:13
为什么JS代码执行了但页面没有跳转
2026-11-03 16:29:09
Vue.js 项目中 Axios 拦截器封装与接口对接实战
2026-11-02 10:22:43
前端PC端自适应开发:两种常见适配方案解析
2026-11-01 03:30:54
Vue3中通过JS全局调用弹窗组件的实现方案
2026-10-31 21:34:31
