场景：将开发好的vue项目编译打包到linux服务器上的nginx时，出现了css、js丢失，elementui的字体图标无法显示，以及部署完成后在浏览器访问成功，但刷新、回退时出现404的问题。

问题一：css、js丢失

原因：这是由于在执行npm run build命令编译后，在dist文件夹下的index.html页面中，对样式以及js文件的路径都是以 / 开头的绝对路径，例如：

解决方案：

1. 如果是vue3.0以前的版本，则可以在项目在的config目录下的index.js中将以下代码：
   修改为assetsPublicPath: './'。
2. 如果是vue3.0以后的版本，则可以在项目的根目录下创建vue.config,js文件，在里面配置静态资源的路径，代码如下：

    module.exports = {
        publicPath: './'
    }

问题二：vue中使用的elementui组件中的字体图标变成小方块，无法正常显示

原因：vue项目打包之后的背景图片路径会多加static/css，导致文件找不到。

解决方案：在项目build文件夹下的utils.js文件夹中，将以下代码：

添加一句代码：publicPath: '../../'，结果如下

问题三：vue项目部署成功后访问成功后刷新时却出现404错误

原因：这是由于在vue-router中使用了history模式（为了消除地址栏中的 # ），如下所示：

那么，当我们 npm run build 完成并部署到服务器后，刷新某个路由下的页面，会出现 404 或者 502 错误。

这是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。

解决方案：在服务器的nginx做以下配置

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

其中，try_files $uri $uri/ /index.html是关键点。

本文仅个人纪录学习所用，如有纰漏，欢迎指正。