Centos环境下使用Nginx部署Vue3项目

前端 Vue

创建时间:2022-12-31 10:50

阅读:

1.打包Vue项目
 2.安装npm环境
 3.安装项目依赖的包
 4.使用nginx启动程序

1.打包Vue项目

来到Vue目录下执行命令： npm run build 
或者通过这个命令 npm --prefix /data/items run build ,在指定目录下运行npm命令进行构建的命令。

执行完会生成 dist文件夹
然后将 dist文件夹 和 package.json文件 传输到服务器上

2.安装npm环境

2.1 创建目录
mkdir /usr/local/node/
cd /usr/local/node/

2.2 下载安装包
wget https://npmmirror.com/mirrors/node/v16.18.1/node-v16.18.1-linux-x64.tar.xz
(或者到官网下载最新的版本： http://nodejs.cn/download/ )
# 解压
tar -xf node-v16.18.1-linux-x64.tar.xz 

2.3 建立软连接    
ln -s /usr/local/node/node-v16.18.1-linux-x64/bin/npm /usr/local/bin/npm
ln -s /usr/local/node/node-v16.18.1-linux-x64/bin/node /usr/local/bin/node
# 查看是否有安装成功
npm -v

3.安装项目依赖的包

3.1 来到项目 目录下（有package.json的目录下），执行命令：
npm install --force   (--force 强制安装某些依赖包，不加这个命令可能会安装失败)

4.使用nginx启动程序

4.1 安装nginx
yum install nginx -y

4.2 .conf 配置文件

示例一：所有请求都到vue
server {
    listen       6200;  # 端口号
    server_name  _;
    root        /home/wws/06_project/py_001_fund_reception/dist;   # dist文件夹的路径
    index index.html;     
    
    try_files $uri $uri/ /index.html; # 解決Vue强制刷新404问题
    }

示例二：涉及转发请求,某个请求找flask后端服务，剩余的请求继续找vue
server {
        listen       8080;
        server_name  _;
        
        # flask后端服务
        location /checkAuth {
            proxy_pass http://localhost:5050;
        }
        
        # vue服务
        location / {
            root        /data/release/items/dist;
            index index.html;
            try_files $uri $uri/ /index.html;
        }

    }

4.3 启动nginx服务，然后通过 服务器的ip:端口号 就可以访问刚才部署的项目
systemctl start nginx 

或者 指定对应的 xxx.conf文件, 需要替换成对应的nginx文件路径
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。