Vue build 打包和部分vue-config-js配置

vue 打包

当我们使用vue写好项目后我们需要将项目进行打包成html项目，使用一下命令可以打包项目。

npm run build

在当前目录下输入打包命令，等待打包完成后在根目录生成一个dist的文件夹，里面是html页面和css，js，img文件夹。

 -- dist
 	-- css
 	-- js
 	-- img
 	-- index.html

当然这个html项目我们无法通过双击的形式打开，我们需要创建一个服务才能运行此项目。

vue-config-js配置

在vue项目里创建vue.config.js的文件，我们可以在里面配置项目，在打包的时候会按照配置的内容进行打包。

// vue.config.js

module.exports = {
	// ...body
}

productionSourceMap 是否包含map映射文件

默认为true，设置为false后就不会存在map映射文件；用于追踪线上错误信息，没什么太大的作用，因为项目有问题是不会上线。

const path = require("path");
module.exports = {
    productionSourceMap: false
}

outputDir 输出的文件夹名称

默认输出文件夹为dist，我们也可以去修改他。

// vue.config.js

module.exports = {
	outputDir： './myDist'
}

assetsDir 设置静态资源在同一个文件夹

// vue.config.js

module.exports = {
	assetsDir： 'assets'
}

将css，js和img文件夹放在同一个文件夹中，目录结构如下

 -- dist
 	-- assets
	 	-- css
	 	-- js
	 	-- img
 	-- index.html

devServer 设置代理

在实际开发过程中，前后端分离必定会存在跨域，设置代理解决这个问题。

// vue.config.js

module.exports = {
	devServer： {
		proxy： {
			// 为单个请求设置代理
			"/getData" : {
				target : "http://localhost:3000"
			}
		}
	}
}

// vue.config.js

module.exports = {
	devServer： {
		// 统一设置代理
		proxy：  "http://localhost:3000"
	}
}

当然打包还有很多的配置，在网上也会有很多配置vue-config-js的博客，有兴趣可以搜索前往阅读。