Nginx 发布(部署) Vue 项目

原创已于 2022-06-13 11:51:56 修改 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#nginx

于 2021-08-24 15:04:45 首次发布

Vue2.x 同时被 2 个专栏收录

69 篇文章

订阅专栏

Nginx

14 篇文章

订阅专栏

本文介绍了如何通过npm run build打包Vue应用，并详细展示了如何配置Nginx以正确代理静态资源和Vue路由，包括两种不同配置方式。最后演示了启动和访问Vue应用的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、通过 npm run build 进行打包，获得 dist 文件夹

2、安装 Nginx 之后，并在配置文件中添加下面的 server 配置，专门针对 vue 的配置，注意调整根目录。

server {
    # 监听端口
    listen 8088;
    # 主机名称
    # server_name www.xyq.com;
    # 根目录
    root /usr/local/var/vue/chunk/dist;
    # 匹配协议
    location / {
        # 需要指向下面的 @router 否则会出现 Vue 的路由在 Nginx 中刷新出现 404
        try_files $uri $uri/ @router;
        index index.html index.htm;
    }
    # 对应上面的 @router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    # 因此需要 rewrite 到 index.html 中，然后交给路由在处理请求资源
    location @router {
        rewrite ^.*$ /index.html last;
    }
    # 代理
    # location /api/ {
    #     proxy_pass http://10.0.90.164:8086/;
    # }
}

或者：

server {
    # 监听端口
    listen 8088;
    # 主机名称
    # server_name www.xyq.com;
    # 根目录
    root /usr/local/var/vue/chunk/dist;
    # 匹配协议
    location / {
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
    }
    # 代理
    # location /api/ {
    #     proxy_pass http://10.0.90.164:8086/;
    # }
}

3、添加完成之后 nginx -s reload 刷新配置文件，或者重启 nginx 都行，然后就可以通过 http://localhost:8088/ 进行访问了。