Nginx部署vue项目

ng配置

修改的配置如下：

 

<listen>：代理端口（自定义未被占用的端口号）

<server_name>：代理名称（域名、ip），本地就用localhost

<root>：项目存放目录（如果只发布一个项目，就是直接把dist拷贝到html文件夹下这种情况，可以直接用html，否则要指定文件夹）

<try_files>：一个覆盖所有情况的候选资源。如果 URL 匹配不到任何静态资源，返回同一个 index.html 页面

关于部署后遇到的各种问题

1、页面刷新404问题

方法①：打开vue项目，修改router模式，从history改为hash

打开vue项目router配置文件index.js，history——>hash即可

 缺点就是，url里会多出一个#，有点丑

方法②：修改nginx配置项

添加一行：

 也可以这样添加：

两种办法，总有一个适合你！

ps：我的配置文件设置的是第二种写法，印象里当初用第一种写法有问题，所以换了第二种。时间久远记不清当时到底是啥个情况了，整理这篇的时候又把两个办法都试了一编，结果都可用，我：地铁老人看手机.jpg

说不定以后还会遇到类似问题呢，等遇到了再补充吧。

附上文字版：

// 策略一
location / {
    root   html;
    index  index.html index.htm;
    try_files  $uri $uri/ /index.html;
}
// 策略二
location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ @router;
}
location @router {
    rewrite ^.*$ /index.html last;
}