上午已经把Nginx安装好，现在就进行部署。

打包项目

npm run build

image.png
然后会在项目根目录中生成dist文件夹

Nginx配置

打开Nginx的配置文件 E:\nginx-1.15.12\conf\nginx.conf

image.png
然后启动Nginx，访问http://localhost，项目正常运行起来了。 image.png

遇到的问题

项目看似已经正常运行了，能正常跳转，但是在我刷新页面的时候出错了。

image.png

解决方式一：

把vue-router的mode修改为hash，如果不配置默认就是hash，我是修改过所以要改回来。

mode: "hash",

image.png
··
然后重新打包就可以了，但是这种模式会在Url上面出现非常丑的#，如果不介意就这样就可以了，我是受不了。

解决方式二：

mode: "history",

我就非要把 #号搞掉，那么可以在Nginx里面配置一句话.

try_files $uri $uri/ /index.html;

image.png
至于这句话是啥意思可以百度查查，我就简单的理解为rewrite

解决方式三 - 网上看到的没有测试过，只是做个记录

匹配errpr_page

location /{
　　root   /data/nginx/html;
　　index  index.html index.htm;
　　error_page 404 /index.html;
}

暂时我就只遇到这点问题，遇到其他问题在记录。