多配置切换的好处是，前端开发人员可以配置自己开发服务器连接地址，并能轻松的切换成后端开发的服务器地址，进行联调，还不会引起提交后的代码冲突
项目结构 ：
- mock //模拟数据文件
- public //静态资源文件
- shell // 脚本文件
- changeConfig.js //切换配置代码
- src //vue 项目文件
- package.json //不解释
- vue.config.dev.js //开发环境的 vue 配置
- vue.config.prod.js // 测试联调的环境配置
- vue.config.js // 运行时配置
vue.config.dev.js 内容：
var path = require('path');
const Config = require('webpack-chain');
const config = new Config();
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath:'/',
indexPath:path.resolve(__dirname, '../dist/templates/index.ftl'), // 打包后html输出路径
outputDir: path.resolve(__dirname, '../dist/static'), //打包后 js,css,图片等输出路径
transpileDependencies: [
],
configureWebpack: {
// 引入外部依赖，排除包
externals: {
}
},
//去掉打包js里边的source map文件
productionSourceMap: false,
chainWebpack:()=>{
},
devServer: {
proxy: {
'/': {
target: 'http://localhost:8000/' ,//前端开发模拟环境
ws: false,
changeOrigin: true,
secure: false
}
}
},
pages: {
index: {
// page 的入口
entry: "src/main.js",
// 模板来源
template: "public/index.html",
// 在 dist/index.html 的输出
filename: "index.html",
// 当使用 title 选项时，
// template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: "vue 项目",
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ["chunk-vendors", "chunk-common", "index"]
}
},
pluginOptions:{
}
}
vue.config.prod.js 内容
var path = require('path');
const Config = require('webpack-chain');
const config = new Config();
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath:'/',
indexPath:path.resolve(__dirname, '../dist/templates/index.ftl'), // 打包后html输出路径
outputDir: path.resolve(__dirname, '../dist/static'), //打包后 js,css,图片等输出路径
transpileDependencies: [
],
configureWebpack: {
// 引入外部依赖，排除包
externals: {
}
},
//去掉打包js里边的source map文件
productionSourceMap: false,
chainWebpack:()=>{
},
devServer: {
proxy: {
'/': {
target: 'http://www.testvue.com/',//测试联调地址
ws: false,
changeOrigin: true,
secure: false
}
}
},
pages: {
index: {
// page 的入口
entry: "src/main.js",
// 模板来源
template: "public/index.html",
// 在 dist/index.html 的输出
filename: "index.html",
// 当使用 title 选项时，
// template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: "vue 项目",
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ["chunk-vendors", "chunk-common", "index"]
}
},
pluginOptions:{
}
}
changeConfig.js js 内容：
var options = process.argv; //获取命令行传入参数
var shell = require('shelljs') //引入shelljs
console.log("start change config index.js")
console.log("change to :" + options[2])
console.log("----------------------------")
shell.cp("vue.config." + options[2] + ".js", "vue.config.js"); //将dev 或者 prod 覆盖 vue.config.js
console.log("change config index.js finished")
操作步骤：
1. npm install npm-run-all -D //安装npm-run-all
2.npm install shelljs -D //安装shelljs:
3.package.json script 增加：
"changeToDev": "node ./shell/changeConfig.js dev", //切换到前端开发配置文件
"changeToProd": "node ./shell/changeConfig.js prod", //切换到后端联调配置文件
"startForDev": "npm-run-all -l -p -s buildTheme changeToDev serve", //切换开发并启动
"startForProd": "npm-run-all -l -p -s buildTheme changeToProd serve" //切换联调并启动
运行操作：
npm run startForDev //前端开发
npm run startForProd // 后端联调
缺点：
不得在vue.config.js 中改配置，只能在其他两个文件中修改
网友评论