如何配置vue-cli4.0
2024-09-30 19:37:59
这是一期主要分享vue-cli4.0配置
新建一个项目，最令人为难的是配置环境。拿vue来说，创建项目很简单，跟着文档走即可，但是要知道配置本地，测试，生产环境，以及反向代理等等，如果对于一个对vue构建不是特别了解，或者对webpack不是特别了解的人来说，真是很为难。
创建项目不再赘述，直接看如何配置环境。
配置反向代理
反向代理其实就是在本地为了解决跨域问题，将本地启动的比如localhost:8080代理成测试环境，发送给后端就不会出现跨域的问题。
vue-cli2.0以及以前，都是在创建项目的时候，会自动创建一个文件夹build，里面有各个环境配置的文件。vue-cli3.0及之后的版本，省去了这个文件夹，让这个项目结构更加清晰。
我们需要配置时，需要手动在最外层，即跟public文件夹同一级，创建vue.config.js文件夹，用来放所有配置项。
我所配置的反向代理在devServer里配置。
module.exports={
assetsDir:'static',
publicPath:'./',
devServer: {
host: 'localhost',
port: 8080,
proxy: {
'/mall': {
target: process.env.VUE_APP_BASE_URL_MALL,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/mall': ''
}
},
},
},
}
如上的代码将/mall代理成target里面的环境(target环境，下面会做详细描述)，需要注意，反向代理只是针对本地，测试和正式环境不需要代理，在做发请求封装的时候需注意。
配置环境
看下package.json中的scripts项，有几个环境，可以直接npm run对应的环境即可。
如果想配置其他名称或者其他的环境，可以在vue.config.js同一级添加
开发环境env.development
测试环境env.stage
正式环境env.production
在对应的环境文件里，配置如下
NODE_ENV=stage
VUE_APP_BASE_URL_MALL='http://test.cn'
其中NODE_ENV配置的是环境，可以在后期根据环境进行区分本地/测试/正式环境
VUE_APP_是定义相对应的环境变量，可以在反向代理和封装请求的时候使用。
以下是我对发请求进行的封装
import axios from 'axios'
export default function http({url,method='GET',data=null}) {
return new Promise((resolve, reject) => {
let wholeUrl=''
// development：本地；stage:测试；production：正式
if(process.env.NODE_ENV=='development'){
wholeUrl=`/mall${url}`
}else {
wholeUrl=`${process.env.VUE_APP_BASE_URL_MALL}${url}`
}
axios({url:wholeUrl,method,data}).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
});
}
在以后不管是发正式还是发测试，均不用手动修改环境，很便利。
最新文章
- theano .dimshuffle
- Sql Server中暂停命令
- 《Linux内核分析》第七周 读书笔记
- C++学习笔记16：Linux系统编程基础1
- HDU 5102 The K-th Distance
- UVA 10127题目描述
- 【Django】Apache上运行多个Django项目
- VISUAL SVN安装 及客户端使用
- 转ABAP将内表行列转换实例(动态内表) .
- django 模板视图，表单视图，各种视图
- Drools
- ios qq 分享 失败
- POJ 1122 FDNY to the Rescue!
- Javascript—①你好，世界！
- JAVA基础-反射
- ASP.NET网络爬虫小研究 HtmlAgilityPack基础，爬取数据保存在数据库中再显示再自己的网页中
- 菜鸡谈OO 第一单元总结
- 转 Redis 总结精讲 看一篇成高手系统-4
- 微服务与Spring Cloud资料
- JAVA RSA非对称加密详解［转载］