Vue+Webpack项目实现多环境打包
问题描述
项目需要部署到线上开发环境,线上测试环境以及线上生产环境,不同环境访问的地址不同,但是原来的项目采用的是在不同的环境下注释代码展示不同的地址的方式,很明显这样是非常麻烦且有一定的风险的。为此,特意做了此次记录用命令行来实现Vue+Webpack项目多环境打包一、 安装依赖cross-env
npm i --save-dev cross-env
"scripts": {
"dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build:dev": "cross-env NODE_ENV=development ENV_CONfig=dev node build/build.js",
"build:test": "cross-env NODE_ENV=testing ENV_CONfig=test node build/build.js",
"build:prod": "cross-env NODE_ENV=production ENV_CONfig=prod node build/build.js"
},
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
//获取NODE_ENV参数
const env=process.env.NODE_ENV
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
ENV_CONfig:'"dev"',
API_ROOT: env === 'development' ? '"http://...(项目线上开发地址))"' : '"/api"'
})
- 添加test.env.js
'use strict'
module.exports = {
NODE_ENV: '"testing"',
ENV_CONfig: '"test"',
API_ROOT: '"http://..."'
}
- 添加prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
ENV_CONfig: '"prod"',
API_ROOT: '"https://..."'
}
-
dev: { // Paths assetssubdirectory: "static", assetsPublicPath: "/", proxyTable: { "/api": { target: "http://...", changeOrigin: true, //是否允许跨域 pathRewrite: { "^/api": "" //需要rewrite重写的, } } },
4.2 修改build字段
build: { // Template for index.html devEnv: require('./dev.env'),//++++++++++新增 testEnv: require('./test.env'),//++++++++++新增 prodEnv: require('./prod.env'),//++++++++++新增 index: path.resolve(__dirname, "../dist/index.html"), // Paths assetsRoot: path.resolve(__dirname, "../dist"), assetssubdirectory: "static", assetsPublicPath: "./", //++++++++++修改 }
// process.env.NODE_ENV = 'production' // 将此行代码注释 // const spinner = ora('building for production...') // 将此行代码注释 const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.ENV_CONfig + ' production...')
// 原代码 exports.assetsPath = function (_path) { const assetssubdirectory = process.env.NODE_ENV === 'production' ? config.build.assetssubdirectory : config.dev.assetssubdirectory return path.posix.join(assetssubdirectory, _path) } //修改后代码 exports.assetsPath = function (_path) { const assetssubdirectory = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing' ? config.build.assetssubdirectory : config.dev.assetssubdirectory return path.posix.join(assetssubdirectory, _path) }
// 原代码 output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, // 修改后代码 output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing' ? config.build.assetsPublicPath : config.dev.assetsPublicPath },
//原代码 const env = require('../config/prod.env') // 修改后代码 const env = config.build[process.env.ENV_CONfig+'Env']
// 原代码: const isProduction = process.env.NODE_ENV === 'production' const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap 修改后代码: // const isProduction = process.env.NODE_ENV === 'production' const isProduction = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'presentation' const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap
五、 修改项目中http请求设置
const http=process.env.API_ROOT
以上设置完毕之后,就可以完成用命令行来实现多环境打包了
线上开发环境:npm run build:dev
线上测试环境:npm run build:test
线上生产环境:npm run build:prod
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。