手动部署vue项目至Nginx

2020-07-28

手动部署vue项目至nginx

准备：

centos 7.6

git version 1.8.3.1

nginx version: nginx/1.16.1

npm 3.10.10

node-v10.19.0-linux-x64.tar.xz （预先下载然后上传服务器，下载地址http://nodejs.cn/download/）

tar xvf node-v10.19.0-linux-x64.tar.xz  -C /usr/local/         #解压
mv node-v10.19.0-linux-x64 node     #改名
vim  /etc/profile.d/node.sh     #配置全局变量
  export NODE_HOME=/usr/local/node
  export PATH=$NODE_HOME/bin:$PATH
source /etc/profile.d/node.sh     #使配置生效
node -v     npm   -v     #若显示版本号说明安装配置成功

vue 项目：（功能）在web页面输入名字

项目来源：https://github.com/SD-Gaming/Vue2.0_to_do_list-addName-

清理环境：

关闭firewalld

关闭selinux

iptables端口放行

过程：

yum -y install nginx git npm        #直接默认下载最新版

npm install --global vue-cli      #安装vue脚手架

git clone https://github.com/SD-Gaming/Vue2.0_to_do_list-addName-.git       #从GitHub上克隆项目到本地

cd Vue2.0_to_do_list-addName-/     #进入项目工作目录

npm install      #下载工作区的npm工具包

vim config/index.js      #修改assetsPublicPath: ‘/’ 为 ‘./’ 否则不能正确载入静态文件

npm run build      #打包生成一个dist目录（只有这里面的东西放到Nginx上运行才能看到页面效果）（dist目录中包含index.html  static）

vim /etc/nginx/nginx.conf     #修改Nginx配置文件(改端口、主页路径、server_name)

#把原nginx的默认主页改名
mv /usr/share/nginx/html/index.html  /usr/share/nginx/html/index.html.bak

#把打包好的vue项目拷贝到nginx的主页路径下
cp /root/Vue2.0_to_do_list-addName-/dist/* /usr/share/nginx/html/

#重启服务
systemctl start nginx

浏览器访问：http://192.168.142.128/