Vue 项目部署上线 Centos7（保姆级教程）

Vue 项目部署上线 Centos7（保姆级教程）

最近自己捣鼓实现了一个Web个人博客系统

前端基于Vue集成Element-UI框架

后端基于go+gin框架

将部署过程中遇到的问题整理记录下。

1. 先在vue.config.js 文件中配置反向代理解决跨域请求问题

module.exports = {
    productionSourceMap: false,
    lintOnSave: false,
    devServer: {
        proxy: {
            '/mg': {
                target: '', //后端请求地址
                changeOrigin: true, // 允许跨域请求
                pathRewrite: {
                    '^/mg': '' // 去掉前缀 不是必须看具体需求
                }
            },
          '/req_ip': {
            target: 'http://pv.sohu.com',
            changeOrigin: true,
            pathRewrite: {
              '^/req_ip': ''
            }
          }
        }
    },
}

2.修改 router/index.js文件

const router = new VueRouter({
    mode: 'hash', // 上线的时候为 hash
    base: '/usr/local/blog/client/dist', // 这个路径要跟后续nginx.conf配的路径一致，否则会因为路径错误转发不到后端
    routes
})

3. 打包

1.在vue 跟目录下执行
$ npm run build 
2.打包后会生成一个 dist 文件
3.将 dist 文件拷贝到第二步配置的 base 路径（重点）

如果在打包过程中遇到hash的错误可以尝试在打包前在终端执行

export NODE_OPTIONS=--openssl-legacy-provider

4. Centos7 安装 Nginx

先安装必要依赖

$ yum install -y gcc
$ yum install -y pcre pcre-devel
$ yum install -y zlib zlib-devel
$ yum install -y openssl openssl-devel

下载安装Nginx安装包

• 方法一在官网直接下载.tar.gz安装包，然后通过远程工具拉取到 linux 里面【在 /usr/local 里面创建个nginx文件夹，拉进来。（也可以拉到其他地方）】
• 方法二使用wget命令下载，确保系统已经安装了wget，如果没有安装，执行 yum install wget 安装。

本文采用第二种方法（建议）

4.1.进入 usr/local 里面创建 nginx 文件夹，方便后期删除干净

#进入usr下的local目录
cd usr/local
#在local目录下创建 mysql 文件夹
mkdir nginx
#进入nginx目录
cd nginx

4.2.通过wegt下载安装nginx安装包

wget https://nginx.org/download/nginx-1.21.6.tar.gz

4.3. 编译安装nginx

# 解压
tar xvf nginx-1.21.6.tar.gz
# 进入解压后的目录
cd nginx-1.21.6
# 配置
./configure
# 编译
make
# 安装
make install

4.4.启动nginx

# 进入启动目录
cd /usr/local/nginx/sbin
# 启动
./nginx

5 配置vue项目

安装好Nginx之后会在/usr/local/下面生成一个nginx目录

5.1配置

# 进入配置目录
/usr/local/nginx/conf
# 编辑配置
vim nginx.conf

5.2配置内容

server {
        listen       8080; // 端口
        server_name  xxx; // 域名或ip
        location / {
            root   /usr/local/blog/client/dist; // 还记得这个地址吧，前面dist放的地址 切记一定要一摸一样
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /mg/ {
            proxy_pass   http://xxxxx:8888/; 
    // 这个是转发地址，填写的是服务端的访问地址和端口。目的是将请求转发到后   端 /mg/这个根据你项目的需求配置就行
        }
}

转发配置的一个小坑

location /mg/ {
            proxy_pass   http://xxxxx:8888/; 
        }
/mg/
http://xxxxx:8888/
这两个后面都必须加/ 不然会出现地址解析错误 404的情况

6 加载配置并启动

# 进入nginx启动目录
cd /usr/local/nginx/sbin
# 加载配置
./nginx -s reload
# 停止服务
./nginx -s stop
# 启动
./nginx

7.验证

输入服务器地址:端口，有购买域名并备案的也可以直接输入域名：端口