使用nginx部署vue项目

写在前面

最近在公司使用vue开发了一个项目，团队没有运维，所以自己学习了一下nginx部署前端项目。中间也遇到了一些问题，希望能给到大家一点参考。不喜勿喷。

打包文件

首先，进入项目文件夹下，执行 npm run build 打包项目文件，打包完成之后会在项目文件夹下生成dist文件夹。

配置host文件

进入C:\Windows\System32\drivers\etc 目录下，在hosts文件中增加一行 ip和域名的映射关系，例如：

127.0.0.1	test.demo.com

其中test.demo.com为后面在浏览器访问项目的域名

配置nginx

如果没有nginx的同学可以，自行下载。进入nginx文件夹下。

修改nginx.conf配置文件。

在server同级新增一个server

	server {
        listen       80;
        server_name  test.demo.com;
		location / {
		root   D:/xxx/xxx/dist;#此项为你的静态文件dist的路径
        index  index.html index.htm;
		try_files $uri $uri/ /index.html;
		autoindex on;       #开启nginx目录浏览功能
        autoindex_