栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

vue如何配置

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vue如何配置

vue中,测试环境,生产环境,是通过打包来识别和运行的。
识别关键字其实他内部封闭好了。
可以用:process.env.NODE_ENV 来识别。
比如:process.env.NODE_ENV === ‘production’ //说明是生产环境,还有developtest等
具体做方是,在根目录建一个vue.config.js,然后里边写:

第一步:
const path = require(‘path’); //这个require(‘path’)是你建项目后,就有path了,就像 import Vue from ‘vue’ 一样,都在node_modules里边,直接引用就行。
//path是为了方便获取到当前项目的路径,比如获取到D:projecttestmyvuesrcindex.html等信息

第二步,就是判断环境:
let isProduction = process.env.NODE_ENV == ‘production’ ? true : false; //true的话,说明是production
let publicPath = ‘./’; //在配置中有个publicPath,是想知道,是你的运行地址的目录,比如上线地址是:http://www.xxx.com/abc
那你publicPath就需要设置成这个地址,webpack在打包的时候,就会把所有的地址,自动生成成http://www.xxx.com/abc/xxxxxxxxx…
代码:
if(isPro){
publicPath = ‘http://www.xxx.com/abc’;
}

第三步是vue的配置,标识就是:
module.exports = {}; //这里边是打包项目的,其中里边有一项devServer是指的开发环境
比如:
module.exports = {

devServer: {
	open: true,//这一项指的是:当npm run serve时,直接打开浏览器运行项目,比如localhost:8080
	port: 8080,//这个是你自己定义的端口,定义这个,是为了防止你其它项目开了这个端口,为了多开项目,如果设置成8888,那你浏览器就要:localhost:8888
	host: test.xxx.com, //这个是你自己定义的打开本地页面的地址,test.xxx.com:8080,如果你设置了这个,那你要在host里配置127.0.0.1 test.xxx.com,为什么要这样配置呢?
	//因为有些域名登陆、请求数据,是要以某个域名结尾,才能够认为是安全的地址,比如后端判断,必须以 xxx.baiud.com结尾,才给返回正确的数据,那么我们就要设置本地测试
	地址为: test.xxx.baidu.com,这样我们本地调试,后端也会正确返回结果 
	host: true,//是否进行热更新,比如保存代码后,就自动刷新一下项目
	proxy: {
		//这个是本地测试时的代理地址,就是你请求后端接口时,需要用到的,比如项目里请求地址:http://www.xxxx.baidu.com/api/aaaa.java是返回数据的地址
		//那我们需要这样做:在本地发请求是:  test.xxx.biaud.com/api/aaaa.java,这明显是请求不到数据的
		//所以在这里设置:
		'/api': {
			target: 'http://www.xxx.baiud.com',
			changeOrigin: true,
			pathRewrite: {
				'^/api': ''
			}
		}
		//这样就正确代理到了想要的地方
		
	}
},


pages: {
	//这个地方,一般不用写,默认就会找到index.html,但是,巧就巧在,有些项目需要多页面应用,有多个.html文件,该怎么办呢?
	//那就可以在这里边来写,比如项目里,你有index.html,detail.html,other.html等等,就可以如下
	'index': {
		entry: '/src/index.js',//entry是你的入口文件,也就是打包开始时,就找到这个文件
		template: 'src/' + '/index.html',//这个是找到index.js与哪个html来进行关联,如果是detail.html那前边就写detail.html,一般会解析成绝对路径: D:/vue/xxx/src/index.html,这个慢慢了解吧
		filename: _filename + baseName + '.html'//这个是输出的地址,需要根据环境来自定义这个路径比如线上:'http://xxx.baidu.com/abc/index.html'等,本地的时候,只需要/index.html就行了
	},
	'detail': {
		//这个和上边的index一样,只是名字变了
	},
	.....

}

};

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/632227.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号