vue生产环境和发布环境配置不同的接口地址以及打包
1.先来设置不同的接口先找到config 文件下的dev.env.js与prod.env.js她们是生产环境下与发布环境下的/config/dev.env.js/config/prod.env.js首先打开dev.env.js文件代码如下添加一项代码module.exports = merge(prodEnv, {NODE_ENV: ‘“development”’,API_...
1.先来设置不同的接口
先找到config 文件下的dev.env.js与prod.env.js她们是生产环境下与发布环境下的
/config/dev.env.js
/config/prod.env.js
首先打开dev.env.js文件代码如下
添加一项代码
module.exports = merge(prodEnv, {
NODE_ENV: ‘“development”’,
API_ROOT: ‘"//127.0.0.1/api"’ //接口路径
})
找到 prod.env.js下面也添加一项代码
‘use strict’ module.exports = {
NODE_ENV: ‘“production”’,
API_ROOT: ‘"//www.baidu.com/api"’ //根据自己的项目接口
}
然后我们可以在main.js文件设置vue原型,将他设置为全局变量
Vue.prototype.baseURL = process.env.API_ROOT;
这样我们就配置完成了,可以在需要引用的组件中alert(this.baseURL),就可以看到弹出我们设置好的地址了。
或者直接在main.js中进行判断
process.env.NODE_ENV===‘production’?生产地址:开发地址
2.生产环境和开发环境的打包
1)需要安装cross-env
npm install cross-env –save-dev
2)在config文件里面新建test.env.js
里面的内容是
‘use strict’
module.exports = {
NODE_ENV: ‘“testing”’,
EVN_CONFIG:’“test”’
}
3)config中修改prod.env.js文件
‘use strict’
module.exports = {
NODE_ENV: ‘“production”’,
ENV_CONFIG:’“prod”’
}
记住NODE_ENV这里是需要添加双引号的,如果去掉了就会报错哦
4)config中的index.js 文件中build部分代码修改如下:
build: {
prodEnv: require(’./prod.env’),//添加这行
testEnv: require(’./test.env’),//添加这行
// Template for index.html
index: path.resolve(__dirname, ‘…/dist/index.html’),
// Paths
assetsRoot: path.resolve(__dirname, ‘…/dist’),
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
//以下省略… }
5)在build中webpack.prod.conf.js做如下修改:
将
const env = require(’…/config/prod.env’)
修改为
const env = config.build[process.env.env_config+‘Env’]
6)将build里面的build.js部分做修改:
‘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’)// const spinner = ora(‘building for production…’)//原始内容,注释掉 var
spinner = ora(‘building for ’ + process.env.NODE_ENV + ’ of ’ +
process.env.env_config+ ’ mode…’ )//添加这行
7)修改package.json文件(在script里面添加):
“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=testing env_config=test node build/build.js”,
“build–prod”: “cross-env NODE_ENV=production env_config=prod node build/build.js”
},
8)在src文件夹中新建common文件夹,在common里面新建env.js,里面的内容如下:
/* * 配置编译环境和线上环境之间的切换
- 以及静态变量
*baseUrl: 域名地址- routerMode: 路由模式
*/let baseUrl = ‘’;
let routerMode = ‘history’;
let DEBUG = false;
let cancleHTTP = [];//取消请求头设置;
if (process.env.NODE_ENV ==
‘development’) { //生产环境走的地址
baseUrl = “协议名://域名:端口号”;
DEBUG = true;
}else if(process.env.NODE_ENV == ‘production’){
//测试环境地址
baseUrl = “协议名://域名:端口号”; //测试地址
DEBUG = false;
}else if(process.env.NODE_ENV == ‘testing’){
//测试环境地址
baseUrl = “协议名://域名:端口号”; //测试地址
DEBUG = false;
}export default{
baseUrl,
routerMode,
DEBUG,
cancleHTTP }
这样baseurl就可以根据环境来变化了,只要在js文件或者在组件里面引用env.js里面就可以了;
9)想要test环境下则运行:
npm run build–test
10)想要prod环境下则运行:
npm run build–prod
更多推荐
所有评论(0)