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 相关文章推荐
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
Promise静态四兄弟实现示例详解
Jul 07 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笔试题
2009/08/04 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php数组使用规则分析
2015/02/27 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
js去除重复字符串两种实现方法
2013/01/09 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
python获取中文字符串长度的方法
2018/11/14 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
python 简单的调用有道翻译
2020/11/25 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
领导调研接待方案
2014/02/27 职场文书
分公司任命书
2014/06/06 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
董存瑞观后感
2015/06/11 职场文书
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
Java版 简易五子棋小游戏
2022/05/04 Java/Android