vue开发环境、正式环境的配置及原理
修改prod.env.js里的内容,修改后的内容如下:
'use strict'
module.exports = {
NODE_ENV: '"production"',
EVN_CONFIG:'"prod"',
API_ROOT:'"/apis/v1"'
对dev.env.js文件内容进行修改,修改后的内容如下。dev环境配制了服务代理,API_ROOT前的api是配制的代理地址。
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
VN_CONFIG: '"dev"',
API_ROOT: '"api/apis/v1"'
})
对package.json文件中的scripts内容进行个性,添加上新定义的几种环境的打包过程,里的参数与前面的调协保持一致。
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
"build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
修改config/index.js文件中build参数,这里的参数会在build/webpackage.prod.conf.js中使用到
build:{
// Template for index.html
// 添加test pre prod 三处环境的配制
prodEnv: require('./prod.env'),
preEnv: require('./pre.env'),
testEnv: require('./test.env'),
//下面为原本的内容,不需要做任何个性
index:path.resolve(__dirname,'../dist/index.html'),
对build/webpackage.prod.conf.js文件进行修改,调整env常量的生成方式。
// 个性env常量的定义
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']
删除process.env.NODE_ENV的赋值,修改spinner的定义,调整后的内容如下:
'use strict'
require('./check-versions')()
// 注释掉的代码
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 修改spinner的定义
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
// 配置API接口地址
var root = process.env.API_ROOT
//baseURL: process.env.BASE_API
在main.js区分生产与开发环境
process.env.NODE_ENV == 'production'; //生产环境
process.env.NODE_ENV == 'development'; //开发环境
执行npm run build:test打包的就是测试环境
执行npm run build:prod打包的就是生产环境
https://www.cnblogs.com/woshidouzia/p/9345706.html vue给不同环境配置不同打包命令
https://www.cnblogs.com/moqiutao/p/8461665.html VUE 利用webpack 给生产环境和发布环境配置不同的接口地址
vue开发环境、正式环境的配置及原理的更多相关文章
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- vue开发请求本地模拟数据的配置方法(转)
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- Vue 全宇宙最浪 VSCode 配置、插件
别人的那一堆配置.插件我就不写了- 首先进入官网下载并安装. 基本配置 在编译器 文件 >> 首选项 >> 设置,可以拷贝相面的选项后搜索相关配置 设置制表符等于空格数为 2: ...
- 【maven】之配置开发,测试,正式环境pom.xml文件
在进行web程序开发,如果项目组没有使用自动化发布工具(jenkins + maven + svn + tomcat ),我们一般会使用maven的热部署来完成发布,在部署的过程中我们开发,测试,生产 ...
- weex和vue开发环境配置详解(配置系统变量等等)
本文详细讲解如何搭建weex和vue开发环境 安装java 现在java安装包,网上的安装包都是国外的,很难下载下来 就用这个链接下载,亲测无毒,http://www.wmzhe.com/soft-3 ...
- vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...
- Maven -- 在进行war打包时用正式环境的配置覆盖开发环境的配置
我们的配置文件一般都放在 src/main/resource 目录下. 假定我们的正式环境配置放在 src/main/online-resource 目录下. 那么打成war包时,我们希望用onli ...
- VS Code 配置vue开发环境
一.插件 网上搜索vscode插件的文章,动辄十几个,其实根本用不了那么多,很多插件的作用还有重叠,电脑性能还被白白浪费.这里精简为主,每一个插件都发挥它最大的作用,并尽量说明它们的作用 Vetur ...
- vue分别打包测试环境和正式环境
vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量,目前的环境有三个: 一.本地------开发环境 二.线上------测试环境 三.线上------正式环境 我们都知道vu ...
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
目录 1,前言 2,.env文件的作用 3,配置.env文件 4,配置启动命令 5,获取.env中的全局变量 5,实际用处 1,前言 分享一下vue项目中利用.env文件存储全局环境变量,以及利于项目 ...
随机推荐
- c# 值传递
- 使用Dell iDRAC服务器远程控制安装操作系统简要图解
使用Dell iDRAC服务器远程控制安装操作系统简要图解 iDARC tools iDRAC又称为Integrated Dell Remote Access Controller,也就是集成戴尔 ...
- AD 复制状态检查
微软提供了一下工具进行AD复制状态检查 Repadmin: http://technet.microsoft.com/en-us/library/cc811551%28v=ws.10%29.asp ...
- Docker - Cheap sheet
** IMAGE ** $docker image Delete image : $docker image rm image_id make sure all containers be delet ...
- 别人家的java语言编写的自动化测试系统
https://gitee.com/testdevops/easyrest 但是我还不会用 ~~~~(>_<)~~~~ 目前的状况是:大概知道流程了,可是第一个用例就跑步起来 自己想写一些 ...
- Dymola — 多学科系统仿真平台
Dymola 是法国Dassault Systems公司的多学科系统仿真平台,广泛应用于国内外汽车.工业.交通.能源等行业的系统总体架构设计.指标分解以及系统功能验证及优化等.Dymo ...
- machine learning(10) -- classification:logistic regression cost function 和 使用 gradient descent to minimize cost function
logistic regression cost function(single example) 图像分布 logistic regression cost function(m examples) ...
- Spring源码窥探之:Spring AOP初步
AOP(Aspect Oriented Programming):即我们常说的面向切面编程. 什么是AOP?AOP是在我们原来写的代码的基础上,进行一定的包装,比如在方法执行前.方法返回后.方法抛出异 ...
- python - scrapy 爬虫框架(创建, 持久化, 去重, 深度, cookie)
## scrapy 依赖 twisted - twisted 是一个基于事件循环的 异步非阻塞 框架/模块 ## 项目的创建 1. 创建 project scrapy startproject ...
- Python3 报错'latin-1' codec can't encode character 解决方案
Python3 报错'latin-1' codec can't encode character 解决方案 在更新数据库操作时,报错: UnicodeEncodeError: 'latin-1' co ...