vue项目部署到服务器

可乐加冰块.

已于 2022-11-21 13:57:08 修改

阅读量5.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： linux操作及软件安装文章标签： linux vue

于 2022-04-19 14:50:43 首次发布

本文链接：https://blog.youkuaiyun.com/strivew/article/details/124273640

linux操作及软件安装专栏收录该内容

16 篇文章

订阅专栏

启动和打包

cd 进入到你项目的根目录

安装依赖

npm install

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。

npm install --registry=https://registry.npmmirror.com

本地开发启动项目

npm run dev

打包正式环境

npm run build:prod

打包预发布环境

npm run build:stage

执行玩打包命令后会默认在项目的根目录生成dist 文件夹

通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可，其中的 index.html 是后台服务的入口页面。

Ngingx 服务器安装

默认情况Centos7中无Nginx的源，最近发现Nginx官网提供了Centos的源地址。因此可以如下执行命令添加源

sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

安装Nginx
使用命令，看看是否已经添加源成功

  yum search nginx

如果成功则执行下列命令安装Nginx。

sudo yum install -y nginx

设置开机自启

  systemctl enable nginx

只有返回类似，提示才能够确定设置成功

 Created symlink from /etc/systemd/system/multi-user.target.wants/nginx.service to /etc/systemd/system/nginx.service

nginx配置文件默认是在 /etc/nginx/nginx.conf

将打好的dist包放到服务器指定的路径
我这里是放在 /home/ruoyi/dist ，root 配置必须指向 dist包的根目录

location 配置

location / {
    root   /home/ruoyi/dist;
    try_files $uri $uri/ /index.html;
    index  index.html index.htm;
}

nginx 完整配置

 types_hash_max_size 4096;
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    include /etc/nginx/conf.d/*.conf;
    server {
        listen       80;
        server_name  localhost;


        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
		
		# 指向你的vue静态资源，我打包后的文件放在了/home/ruoyi/dist
        location / {
            root   /home/ruoyi/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        # 
        location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;
        }
    }