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