vue项目部署到nginx服务
vue开发的项目,通过编译会得到 dist文件夹,如何发布到nginx服务器上?
1 配置nginx服务器
在nginx服务文件中,打开 conf文件夹,如下
为了不改变nginx的默认配置(nginx.conf),复制一份,重名为 custom.conf,如下
修改 custom.conf 文件中的 root 参数为 dist,如下
......
server {
listen 80; // 监听端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root dist; // vue项目打包的文件夹
index index.html index.htm;
}
......
2 启动 nginx 服务
在nginx.exe目录下,通过 cmd 执行下面命令,实现控制 nginx
nginx 启动nginx服务,使cmd窗口一直处于执行中,不能进行其他命令操作
start nginx 启动nginx服务,不会使cmd窗口一直处于执行中(推荐)
start nginx -c conf\custom.conf 按指定的配置文件启动nginx服务,不会覆盖nginx原始配置文件(推荐)
nginx -s stop 停止nginx服务,快速停止nginx,可能并不保存相关信息
nginx -s quit 停止nginx服务,完整有序的停止nginx,并保存相关信息(推荐)
nginx -s reopen 重启nginx服务
nginx -s reload 重启加载nginx配置文件(推荐)
nginx -v 查看nginx版本
![](https://img2020.cnblogs.com/blog/1995639/202101/1995639-20210121213518977-1307596245.png)
3 vue项目刷新出现404问题
vue-router默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载,但是hash会以#号结尾。我们可以使用路由的history的模式,现实没有#号结尾,不过history的这种模式需要后台配置支持。
当我们进入项目的主页时,一切正常,可以访问,但是当我们刷新页面或者直接访问路径的时候就会返回404。其原因是在history模式下,通过动态js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求。但在浏览器里输入网址时,就一定要对服务器发起http请求,如果这个风址目标在服务器上又不存在,所以会返回404。
注:对于vue-router的history模式在开发的时候,不会出问题,是因为开发时用的服务器为node,dev环境中已配置好了。
怎么解决这个问题?
vue-router 的官方文档有讲,在nginx配置文件中添加try_files $uri $uri/ /index.html;
,如下:
...
location / {
root dist; # 项目的静态文件夹
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
...
4 vite打包的gzip优化配置
nginx有一个模块是gzip模块,只要开启了,nginx就会帮你来把数据(静态资源 和 接口数据)进行压缩,然后传入到客户端,客户端来解压,然后在进行代码的读取,其实这一步就是节约带宽,减少传输的代码包的数量,从而节约传输时间,然后网站就能很快打开了。
修改nginx的配置文件内容如下,开启nginx的gzip功能。
gzip on; # 开启或者关闭gzip模块
gzip_buffers 4 16k; # 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流
gzip_comp_level 6; # gzip压缩比,1 压缩比最小处理速度最快
# 匹配MIME类型进行压缩,(无论是否指定)"text/html"类型总是会被压缩的
gzip_type text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
![](https://img2022.cnblogs.com/blog/1995639/202206/1995639-20220622001928029-1826707336.png)
vite打包的vue项目可以通过vite的插件vite-plugin-compression
实现在vite打包时,生成gzip。vite.config.ts配置如下:
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [viteCompression({
//filter: // 过滤器,对哪些类型的文件进行压缩,默认为/.(js|mjs|json|css|html)$/i
verbose: true, //是否在控制台输出压缩结果
disable: false, // 是否禁用压缩
threshold: 10240, // 启用压缩的文件大小限制,单位是字节,默认为 0
algorithm: 'gzip', // 采用的压缩算法,默认是 gzip
deleteOriginFile: false, // 压缩后是否删除原文件,默认为 false
ext: '.gz' // 生成的压缩包后缀
})]
})
vite-plugin-compression官网:https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md
同时,也需要相应配置nginx,启动gzip模块,优先使用vite打包好的本地gzip压缩文件。
gzip on; #开启gzip功能
gzip_static on; #开启gzip静态压缩功能,您应该确保压缩和解压文件的时间戳匹配
gzip_http_version 1.1; #gzip http版本,默认是1.1,使用 gzip_static,就是要 1.1的版本
gzip_buffers 4 16k; #gzip缓存大小
gzip_comp_level 6; #gzip 压缩级别 1-10
#gzip 压缩类型
gzip_types application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
#Nginx作为反向代理的时候启用,开启或者关闭后端服务器返回的结果
gzip_proxied expired no-cache no-store private auth;
5 配置反向代理
根据上面修改的 root参数,在nginx服务器的根目录下建立 custom文件夹,如下
在 custom文件夹 中建立一个用来测试的 html文件(代码如下),其中JS代码用来测试nginx的反向代理,如下
<body>
<h1>Welcome to custom!</h1>
<p><em>Thank you for using nginx.</em></p>
<script>
fetch('/ajax/movieOnInfoList?token=&' +
'optimus_uuid=43388C403C4911EABDC9998C784A573A4F64A16AA5A34184BADE807E506D749E&' +
'optimus_risk_level=71&' +
'optimus_code=10').then(res => res.json()).then(res => {
console.log(res)
})
</script>
</body>
浏览器访问 http://localhost:80,可以看到网页正常访问,但是并没有使用nginx的反向代理获取数据,如下
再次配置 custom.conf 文件,实现反向代理,如下
......
server {
listen 80; # 监听端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root custom; # 临时修改,测试反向代理
index index.html index.htm;
}
# 从nginx走的请求,以 /ajax 开头,代理到https//m.maoyan.com服务器上
location /ajax/ {
proxy_pass https://m.maoyan.com;
}
......
打开命令行,执行.\nginx -s reload
重启 nginx,相关代码如下,获取https//m.maoyan.com的数据,如下