vue-cli项目配置多环境的详细操作过程


Posted in Javascript onOctober 30, 2018

vue-cli 默认只提供了 dev 和 prod 两种环境。但其实正真的开发流程可能还会多一个 sit 或者 stage 环境,

就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量

详细操作过程

1.在 package.json 中添加 test 命令

"scripts": {
  "dev": "cross-env NODE_ENV=online node build/dev-server.js --host 192.168.1.8",
  "local": "cross-env NODE_ENV=local node build/dev-server.js",
  "build": "node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
  "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"
 },

2.创建环境文件 (BASE_API 为接口的主地址)

/config/dev.env.js (开发环境)

module.exports = {
 NODE_ENV: '"development"',
 ENV_CONFIG: '"dev"',
 BASE_API: '"http://192.168.1.7"' // 这里是后端和后端做开发测试
}
/config/sit.env.js (测试环境,测试服)

module.exports = {
 NODE_ENV: '"production"',
 ENV_CONFIG: '"sit"',
 BASE_API: '"http://test.todomore.cn"'
}
/config/prod.env.js (生产环境,正式服)

module.exports = {
 NODE_ENV: '"production"',
 ENV_CONFIG: '"prod"',
 BASE_API: '"http://www.todomore.cn"'
}

3.修改 config/index.js

var path = require("path")

module.exports = {
 // 开发环境配置
 dev: {
  assetsSubDirectory: "static",
  assetsPublicPath: "/",
  port: 7127,
  // context: [
  //  //代理路径
  //  "/shopping",
  // ],
  // proxypath: "http://localhost:7127",
  cssSourceMap: false
 },
 // 生产环境配置
 build: {
  index: path.resolve(__dirname, "../../../public/store/index.html"),
  assetsRoot: path.resolve(__dirname, "../../../public/store"),
  assetsSubDirectory: "static",
  assetsPublicPath: "/store/",
  productionSourceMap: true,
  // 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"]
 }
}

4.安装插件(如果 package.json 里面本来就有 cross-env 的话就不用这一步了)

npm install --save cross-env

修改 webpack.prod.conf

原来的 env 是引入的 prod.env:

// const env = require('../config/prod.env')

修改为:

const env = require("../config/" + process.env.env_config + ".env")

6.修改提示语

跟 build:pre 不同的是 node_env 需要指向 config 中的文件名称,与之对应的是 env_config 的名字。

这样便可以打包成功了。

build.js 中有一段描述:

js const spinner = ora("building for prod....")

可以动态修改为:

js const spinner = ora("building for " + process.env.env_config)

使用命令

# 生产环境(正式服)
npm run build:prod
# 测试环境(测试服)
npm run build:sit

生成在根目录 dist 的配置

index: path.resolve(__dirname, '../dist/index.html'), // 入口文件路径
  assetsRoot: path.resolve(__dirname, '../dist'), // 生成在/dist
  assetsSubDirectory: 'static',          // 资源子目录
  assetsPublicPath: '/',             // 资源公共路径

总结

以上所述是小编给大家介绍的vue-cli项目配置多环境的详细操作过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
学习vue.js条件渲染
Dec 03 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
详解微信小程序中组件通讯
Oct 30 #Javascript
vue移动端项目缓存问题实践记录
Oct 29 #Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 #Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 #Javascript
vue-router权限控制(简单方式)
Oct 29 #Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 #Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 #Javascript
You might like
php在线生成ico文件的代码
2007/10/09 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
Javascript学习指南
2014/12/01 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
wxPython 入门教程
2008/10/07 Python
Python常用内置函数总结
2015/02/08 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python编程中的异常处理教程
2015/08/21 Python
关于Django外键赋值问题详解
2017/08/13 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
《鞋匠的儿子》教学反思
2014/03/02 职场文书
中学校庆方案
2014/03/17 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
护理实习生带教计划
2015/01/16 职场文书
技术入股合作协议书
2016/03/21 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
python中对列表的删除和添加方法详解
2022/02/24 Python
python实现会员信息管理系统(List)
2022/03/18 Python