vue项目如何打包部署并用Nginx做代理访问

采用vue-cli 3.10.0创建完项目后，就可以进行开发，这里拿demo做一个打包部署的教程。还没有创建的，可以参考我之前的文章进行创建项目：vue-cli 3.0 创建项目

打包命令：

npm run build
或者：
yarn build

打包完成后，在目录里会出现dist文件夹：

将这个文件夹根据实际情况，放到指定位置。我这里是window环境，放到了D:\vue-demo.

之后，编辑nginx(这里不介绍如何安装nginx啦，假设您已经安装好了)的配置文件nginx.conf：

在server{...}的上一行加入：

include vhost/*.conf;

表示在nginx.conf同级别下引入文件夹vhost，以及里面任何以.conf为格式的文件。

打开vhost文件夹，新建文本文件vue.txt。更改文件格式为vue.conf。用记事本编辑它：

server {
	listen 8084;
	access_log logs/vue-demo.access.log;
	error_log logs/vue-demo.error.log;
	location / {
		root D:/vue-demo;
		index index.html index.htm;
		try_files $uri /index.html;
	}
	error_page 500 502 503 504 /50x.html;
	location = /50x.html {
		root D:/vue-demo;
	}
	location ~ /\.ht {
		deny all;
	}
}

此处是完整的配置，里面监听的端口是8084，路径是上面设定的。这些可以根据实际情况变更。

之后，启动nginx：

start nginx

如果之前已经启动了，则重启即可：

nginx -s reload

然后输入网址：http://localhost:8084即可看到项目：