前后端分离项目部署注意事项，前端使用vue，部署主要包括

1. aliyun配置
2. vue配置
3. Nginx配置

aliyun配置

使用阿里云服务器，有免费使用一个月的版本。这里正常下载安装就行，需要注意的是阿里云服务器端口需要在控制台开放，否则无法访问。 进入安全组： 配置规则： 添加端口：

vue配置

1.配置node.js环境

首先在Linux中配置node.js环境，环境配置aliyun有教程: 我也记录一下： 1.下载Node.js安装包

wget https://npm.taobao.org/mirrors/node/v12.4.0/node-v12.4.0-linux-x64.tar.xz

2.解压

tar -xvf node-v12.4.0-linux-x64.tar.xz

3.调整安装路径

mv node-v12.4.0-linux-x64/ /usr/local/node

4.添加环境变量

echo "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile

5.是环境变量立即生效

source /etc/profile

6.测试

node -v
npm -v

2.安装依赖、打包

云服务器获取前端项目可以通过git也可以用类似Xftp这种工具直接拖过去。进入项目根目录：

安装依赖：

npm install --unsafe-perm

一定加--unsafe-perm，否则会出现权限问题，依赖安装失败！

打包：

npm run build

或者npm run build:prod之类的，看你的目的和package.json文件怎么设置的

3.关于vue.config.js配置

// webpack-dev-server 相关配置
  devServer: {
          
   
    host: 0.0.0.0,
    port: port,
    proxy: {
          
   
      [process.env.VUE_APP_BASE_API]: {
          
   
        target:http://39.102.92.123:8080,// 后端地址端口
        changeOrigin: true,
        pathRewrite: {
          
   
          [^ + process.env.VUE_APP_BASE_API]: 
        }
      }
    },
    disableHostCheck: true
  },

PS:

有的说要改vue.config.js文件里面的这个”/“改为”./“： 说不改的话可能css、js等文件加载不出来，我没遇到这个问题，所以提一嘴。

Nginx配置

我没用docker，是直接安装的nginx，注意nginx下载完需要编译、更改配置文件nginx.conf、运行 。

nginx安装

1.去官网下载安装包，通过xftp传到服务器上 1.解压

tar -xvf nginx-1.21.1.tar.gz

2.安装依赖

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

3.进入解压后的文件夹执行configure

./configure

4.进入解压后的文件夹执行make

make

5.安装

make install

6.查看nginx目录安装位置（/usr/local/nginx）

whereis nginx

7.进入安装目录（/usr/local/nginx/sbin/）执行一下操作：

./nginx      启动
./nginx -s reload   重启
./nginx -s stop   停止

nginx.conf配置

主要改下面这一块