关于vue.config.js文件的配置介绍

关于vue.config.js的配置介绍

前言

关于使用cli3创建vue项目大家很熟悉,但是配置vue项目的设置,可能对于初学者大多一头雾水,刚入门的程序员对于配置代理,配置webpack打包也是一知半解(包括本人),所以我总结下如何配置,文章可能有的讲解有错,可以在评论区留下需要更改的地方,我会马上的更改
本项目我使用qiankun框架有使用的地方我会标记,大家略过即可

文件

在项目根目录下,记得不是src文件下,是项目根目录下创建vue.config.js文件

vue.config.js 文件

后我们上代码,记得看代码后面的注释,这个是我自己的理解,可能不一定正确,但是很通俗

	//vue.config.js 文件
const path = require('path')  //引入node.js核心模块path,意思是路径模块
function resolve(dir){
	return path.join(__dirname,dir)  
	//这个函数的意思就是拼接目录,__dirname,是node.js的固有的,意思是绝对路径的前缀👆🏻
}
//比如我需要文件src的绝对路径使用上面函数 resolve('src'),就能获取到绝对路径
const packageName = require(resolve('package.json')).name;   
//qiankun子应用需要我们配置(个人项目不需要理会)👆🏻
const VUE_CLI_SERVICE_MODE = process.VUE_CLI_SERVICE.mode;  
//注意这个mode,在package.json中的scripts:命令有对应👆🏻
window.console.log('NODE_ENV: ', process.env.NODE_ENV);  
//这个是我们查看是什么环境(dev环境,测试环境,生产环境等)   
//这里我就要多带一嘴了,其实这就是环境变量配置 这个要看下一份.env文件的代码	



//项目具有好多的环境,要设置每个环境代理很麻烦,说以用了这个样的方式不同的环境引入不同的代理js文件(例子:根目录下的:proxy.dev.js文件)
let proxy = {};  
let envProxy = {};
if (process.argv[2] === 'serve') {
 	//process.argv 属性返回一个数组，这个数组包含了启动Node.js进程时的命令行参数，
 	//数组的第一个元素process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径
 	//第二个元素process.argv[1]——为当前执行的JavaScript文件路径
 	//剩余的元素为其他命令行参数 process.argv[2]就是我们启动的命令行
 // 默认配置，所有环境本地启动都会引入
 proxy = require('./proxy.js');   //拼接路径
 // 环境配置，根据环境引入响应的配置，覆盖默认配置
 envProxy = require(`./proxy.${process.VUE_CLI_SERVICE.mode}.js`);    

}



导出一个包含选项的对象
module.exports = {
	outputDir:'dist', // npm run build  打包构建后存放的目录 
	assetsDri:'assets' //放置生成的静态资源 (js、css、img、fonts) 的目录。
	productionSourceMap: false,  //是否为生产环境构建生成 source map
	//source map 直译过来就是资源地图。所以，source map的作用就是定位。source map定位的时浏览器控制台输出语句在项目文件的位置。 
	//就是你window.console.log('打印到控制台上面会显示到具体是那一行',
	//看报错的时候挺有用的,但是false将提高构建速度)
	publicPath:process.env.VUE_APP_URL_PATH,   //部署应用包时的基本 URL， 用法和 webpack 本身的 output.publicPath 一致.
	//这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
	devServer:{  //配置webpack-dev-server 的行为
		disableHostCheck:true 
		//新版的webpack-dev-server出于安全考虑，默认检查hostname，
		//如果hostname不是配置内的，将中断访问。
		host: 'localhost',  //这个不解释了,我也不知道怎么解释
 		port: '8080',  //设置的端口
 		open: true,  //true为表明我们运行命令行,页面会自动打开 npm run server 的时候页面自己打开
 		 headers: {  //该配置项可以在HTTP响应中注入一些HTTP响应头。
   			'X-foo': '112233'
 		}
 	//这个常用了,也是每个项目都要使用,就是代理服务可以在我们请求的时候帮助我们跨域
 		  proxy: {
         //...proxy,   
         //...envProxy  
         //之前我上面引入了每个环境代理文件js所以可以这样写,下面是常规例子👇🏻
            '/api': {    //只要请求中带有/api的url,就会经过这里请求
      			target: 'http://www.weather.com.cn',     //目标请求地址
      			changeOrigin: true    //true为可以跨域
     			 pathRewrite: {  
     			  //   '^/apis': ''表示把/apis替换为‘’(空字符串)，这样既能使用代理，
     			  //   又能在请求接口api时去掉/apis，获得正确的短信api路径。
        				 '^/api': ''    
     			},
     	},
     },


     pages:{  //默认多页配置,默认undefined
     	//在 multi-page（多页）模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
     	//使用key:value是一个对象形式
     	// value 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
     	enter:{
     		entry:'src/pages/enter/main.js',    //page的入口文件
     		title:'进入页面' ,   
     		//👆🏻template中的title 标签需要是<title><%= htmlWebpackPlugin.options.title %></title>
     		template:'src/pages/enter/index.html' , //模板文件,在dist/index.html的输出文件
     		filename: 'enter.html',  //文件名
     		minify: {
             	removeAttributeQuotes: false  // 是否移除属性的引号
         	},
         	//👆🏻使用minify会对生成的html文件进行压缩。默认是false。
         	//html-webpack-plugin内部集成了 html-minifier,因此，还可以对minify进行配置：
         	//（注意，虽然minify支持BooleanObject,但是不能直接这样写：minify: true , 
         	//这样会报错 ERROR in TypeError: Cannot use 'in' operator to search for 'html5' in true , 
         	//使用时候必须给定一个 { } 对象 ）网上面的解释不多,我只找到这些
         	
         	chunks: ['chunk-vendors', 'chunk-common', 'index']
         	 // 在这个页面中包含的块，默认情况下会包含
   			// 提取出来的通用 chunk 和 vendor chunk。
   			
			 // 当使用只有入口的字符串格式时，
 			// 模板会被推导为 `public/subpage.html`
 			// 并且如果找不到的话，就回退到 `public/index.html`。
 			// 输出文件名会被推导为 `subpage.html`。
 			subpage: 'src/subpage/main.js' (这个我没有用上,所以照搬文档)
     	}
     },//当然你可以写多个子页面以上面对象的形式
 	configureWebpack:{
 		resolve: {
   			alias: {
     			'@': resolve('src') ,   这个是最常用的,修改路径把src路径换成@
     			'_c':resolve('src/components'), 也可以自己修改  
  			 }
 		},
 	},
 	chainWebpack(config){
 		//这个可以搞首屏加快,但是太复杂了以后在补充,或者直接不写了吧
 		window.console.log(config)
 	},
 	pluginOptions: {
         // 为每个vue组件全局引入改变量文件，无需在vue文件手动引入等繁琐操作即可使用全局变量
     	'style-resources-loader': {
       	  preProcessor: 'less',
     	    patterns: [path.resolve(__dirname, 'src/c-bop-common/styles/vars.less')]
    	 }
	 }
 	
 	output: {   //如果是qiankun的子应用,就要加上 (项目需要可以忽略)		
         // 把子应用打包成 umd 库格式
         library: `${packageName}-[name]`,
         libraryTarget: 'umd',
         jsonpFunction: `webpackJsonp_${packageName}`
     }
}

.env.development文件代码

.env.development 这里是配置环境变量(这里我也不太明白,只能说下我理解)

	#下面我们以.env.development文件为例子
	ENV = 'development' 
	#  在打包时配置环境变量，用来区分开发环境 / 正式环境,你也可以写更多的环境 当然在package.json文件下的scripts对象下可以配置更多的环境命令,如下图
	#注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX
	VUE_APP_MAS_TGC = MAS_TGC_UAT
	VUE_APP_LOGIN_URL = https://www.login.com/login   //这里是配置这个环境下我登录是使用这个页面(项目需要,不重要)
	VUE_APP_LOGOUT_URL = https://www.logout.com/logout  //这个环境下我退出登录是使用这个地址(项目需要,不重要)
	VUE_APP_AUTH_BASE_URL = /api/mccs   //这个是配置我这个环境的基准路径,'需要请求API'
	VUE_APP_API_BASE = /api/        //这个是配置基础.....应该只是一个配置值
	#还可以设置更多 只要遵循开头为VUE_APP_ 就可以了(我们多数就使用VUE_APP_BASE_URL )
	

参考文档 vue cli
有错误,或者想补充的,评论区留下建议!!!

没有人一生下来就会,敲代码也一样,多总结,多记忆
代码没有终点,坚持跑就不会输. ---刘博文