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

vue 打包

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

npm run build

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

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

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

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

// vue.config.js

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

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

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

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

// vue.config.js

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

// vue.config.js

module.exports = {
	assetsDir： 'assets'
}

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

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

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

// 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的博客，有兴趣可以搜索前往阅读。