问题解决1：nginx反向代理丢失js、css问题

我们已经可以通过 http://118.25.194.49:8080 访问到我们的项目，此时，假设我们要上线，8080端口暴露着实不好看，我们希望是类似http://118.25.194.49/demo1/这样的格式进行访问项目，看着比较舒服，这样怎么做呢？

1. 使用反向代理

server {
    listen       80;
    server_name  localhost;
    location /demo1 {
        proxy_pass   http://118.25.194.49:8080/;
    }
}

看似这种方法直接就解决了这个痛点问题，这个配置文件的含义就是将/demo1的请求转发到8080端口上，十分完美，我们重启nginx试一下效果：

image.png

js、css文件都找不到了

image.png

我们发现，项目中的静态文件为啥都直接去根目录去找呢？问题出在打包的配置文件上：
我们本地执行打包命令yarn build，然后去根目录的dist文件夹中查看index.html文件，发现下面的情况：

image.png

发现所有的外部文件都是去根目录开始的，这就会产生上面的问题。

2. 解决产生的问题

解决问题肯定是去整理刚才的路径，我们这里修改配置文件中的发布路径

image.png

对于新版本的vue，需要新增vue.config.js，并添加如下配置，产生的效果是一样的

image.png

这时候，再次打包，看一下dist里面的index.html文件，发现已有了效果。

image.png

此时，提交代码到github，服务器拉下来代码，运行，查看效果，成功。

image.png

• 一些补充：

其实用相对路径来解决这个问题不是最好的方案，甚至vue-cli4.x之后，就不支持将publicPath设置为./了。
看了公司的项目及Nuxt框架的推荐，均是推荐使用绝对路径来设置publicPath

1. 首先你可以设置：
   assetsPublicPath: http://www.你的网站.com/项目名/ 这样子，这样设置后，就可以将项目进行打包，重启nginx即可。
2. 其次，可以对项目进行cdn优化
   将assetsPublicPath设置为cdn地址，进行打包后，只将index.html文件或一些必要文件放到服务器上，其余js、css、字体文件都可以上传到cdn上，这样不仅可以减轻服务器压力，而且可以按区域内容分发，加快静态资源加载速度，从而加速首页打开速度。