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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
javascript中如何处理引号编码"
Aug 15 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
程序员编程十条戒律
2009/07/09 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
pow在python中的含义及用法
2019/07/11 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
工艺工程师岗位职责
2014/03/04 职场文书
会计求职信范文
2014/05/24 职场文书
电子商务专业求职信
2014/07/10 职场文书
服务整改报告
2014/11/06 职场文书