部署vue项目

一、项目简介与技术栈

1、WebApp（H5项目）

• 技术栈：vue、vue-router、vuex、vant、sass、rem。
• 主要功能：首页商品列表、下拉刷新、触底加载、分页；品类搜索（vuex实现缓存）；购物车、登录鉴权、注册；个人中心，地址簿管理等。

2、管理系统（PC项目）

• 技术栈：vue、vue-router、vuex、element-ui、sass、socket.io-client
• 主要功能：登录鉴权、权限管理；商品的增删改查、图片上传；Socket通信服务等。

3、Node RESTful API

• 技术栈：node.js、express、ejs、mongoose
• 主要功能：登录、注册、token鉴权、权限管理、商品管理、购物车（订单）管理、地址簿管理等。

WebApp（H5项目）

管理系统（ PC项目）

二、上线前准备

1、域名购买、备案、DNS解析

在阿里云注册账号，购买.com域名一个。在阿里云控制台中，点击“备案”，进入备案专区，提交备案资料（协议复印件照片、身份证复印件照片、备案幕布拍照照片等）。

初次备案，需等待21个工作日出备案结果。备案成功后，可以拿到 ICP主体备案号，在网站开发时，将其添加到网站底部。

进一步，使用阿里云免费的 DNS 解析服务，完成域名到云服务器IP地址的解析（你得先买一台 ECS云服务器，见下方内容）。

域名解析

• www 配置PC官网、Node数据库服务
• m 配置 H5官网
• oa 配置管理系统网站
• cdn 配置图片服务

2、购买一台云服务器

购买ECS云服务器

有了云服务器，就有了公网IP和私网IP，上文中的域名解析服务，就要用到公网IP。我买的云服务器是 CentOS 7.4 64位。

使用 XShell 或者其它 SSH 工具即可远程连接云服务器，进一步安装你所需要的软件和应用程序。在 Git Bash 中，可以使用 ssh 命令进行连接。

ssh root@xxx.xx.xxx.xxx # 输入密码，连接成功 

三、基础软件安装

1、nginx 安装

yum info nginx yum install nginx # 默认安装在 /etc/nginx目录 # nginx.conf 是默认配置文件 

nginx常用命令有：

# 检测修改后配置文件是否有语法错误 nginx -t #启动 nginx 服务 nginx -c /etc/nginx/nginx.conf # 停止 nginx 服务 nginx -s stop # 重启 nginx 服务 nginx -s reload 

2、git 安装

yum info git yum install git 

git 常用命令：

# 配置用户名和邮箱 git config --global user.name "xxxx" git config --global user.email "xxxxx" git config --list # 记住用户名和密码，方便使用 git config --global credential.helper store # 克隆、更新远程代码 git clone git pull 

3、node 安装

yum info nodejs yum install nodejs # 验证 nodejs 安装成功与否、版本号查询 node -v npm -v 

如果 yum 安装的 nodejs 版本过低，我们还可以使用另一种方式来安装指定版本的nodejs。

# 下载nodejs v12 wget https://nodejs.org/dist/v12.14.1/node-v12.14.1-linux-x64.tar.xz # 解压 tar xf node-v12.14.1-linux-x64.tar # 重命名文件夹 mv node-v12.14.1-linux-x64 /usr/local/node12 # 配置环境变量 vim /etc/profile # 在这个配置文件中添加一行环境变量 PATH=/usr/local/node12/bin:$PATH # 让环境变量生效： source /etc/profile # 测试node安装是否成功 node -v npm -v 

4、mongodb安装

参考mongodb英文官网，根据文档指示安装Linux平台对应的社区版本。

# 安装 MongoDB 社区版（免费） yum info mongodb-org yum install mongodb-org # 启动数据库 systemctl start mongod systemctl status mongod # 进入交互式命令行环境，说明安装成功 mongo show dbs # 创建数据库，数据库名为node use node db.createCollection("users") # 向users集合中插入一条数据 db.users.insertOne({username:'admin',password:'******',role:'admin'}) db.users.find() 

四、部署 node api 服务器

1、启动 node服务

使用 ftp工具，或者使用 git 把本地的 node代码推送到云服务器上。使用 nodemon 启动 node 服务。

# 使用 nodemon # 在 node服务程序的根目录 npm install nodemon -g nodemon app.js 

另一个选择是，安装 pm2 ，更加优雅地管理 node 服务。

npm install pm2 -g pm2 start app.js 

2、部署node api服务

检测防火墙是否关闭，如果未关闭，可先关闭掉防火墙。

systemctl status firewalld.service systemctl stop firewalld.service systemctl disable firewalld.service 

3、在nginx中配置node api服务

server { listen 80; server_name www.xxxx.com; include /etc/nginx/default.d/*.conf; # node api接口 location /api { proxy_pass http://localhost:8888; } } 

每次修改nginx配置文件，都要重启nginx。

nginx -t nginx -s reload 

4、在客户端测试node服务的连通性

# nginx服务的默认端口是80 # 使用域名测试接口的连通性 http://xxxx.com/api/v1/user/list # 使用外网IP地址测试接口 http://xxx.xx.xxx.xxx/api/v1/user/list 

五、部署管理系统/WebApp

1、Vue项目打包的注意事项

• 无论部署生产环境，还是部署测试环境，都要进行打包。

• 部署打包，本地development中的所有配置，比如devServer都不起作用，即不会影响线上环境。

• /src中的文件模块会被webpack打包处理、压缩、添加Hash命名等，/public里的资源文件，不会被处理，后续可以方便地进行CDN加速。

• Vue项目打包，以vue.config.js配置文件为准，常用配置可参考Vue CLI文档。

• filenameHashing默认为true。当它是开启状态时，/src中所有打包的文件都会被加上hash值，这是为了解决浏览器的强缓存的缺陷。（当webpack打包时，被关联的文件如果没有发生变化，Hash是不变的。当被关联的文件修改了，再次打包时，它打包结果的hash会变化。）

• 在开发过程中，当我们使用图片时，应该把图片放在哪里呢？1、远程图片（可直接使用图片URL）；2、不需要考虑优化的图片（可以放在assets目录中,它会变成代码包的一部分）；3、可能要进行CDN优化的图片（建议放在public中）。Vue脚手架环境下开发，建议使用模块化语法统一管理项目中的所有图片。

• baseURL用于指定 ajax的 baseURL，每次打包时都特别注意。它常常会导致跨域问题产生，需要使用nginx配合解决跨域问题。

• publicPath用于控制打包后的index.html文件用何种方式引入各种静态文件，其默认值是/。

• pages用于实现多页面应用程序（MPA）,在默认情况下Vue脚手架做的是单页面应用程序（SPA）。

• 如果Vue-Router使用的history路由模式，当部署到线上时，会出现404的刷新问题，这需要在nginx中做重定向处理。

2、nginx.conf 配置示例

使用ftp工具，或者使用git把打包好的静态资源文件传输到云服务器上。

# 部署 node api 服务 server { listen 80; server_name www.xxxx.com; include /etc/nginx/default.d/*.conf; # node api接口 location /api { proxy_pass http://localhost:8888; } } # 部署管理系统（PC项目） server { listen 80; server_name oa.xxxx.com; location / { root /root/vue-stack/web-gp/oa; index index.html; } # 解决跨域问题 location /api { proxy_pass http://xxxx.com; } } # 部署WebApp（H5项目） server { listen 80; server_name m.xxxx.com; location / { root /root/vue-stack/web-gp/m; index index.html; # 解决Vue-Router的 history模式问题 try_files $uri $uri/ /index.html; } # 解决跨域问题 location /api { proxy_pass http://3fengs.com; } } # 部署图片服务 server { listen 80; server_name cdn.xxxx.com; # 项目中的图片存储位置 location / { root /root/vue-stack/node-fullapi-gp/public; } } nginx -t nignx -s reload 

重启 nginx 即可正常访问上述两个项目

原文链接：https://blog.csdn.net/lys1962128978/article/details/121427711?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918471416782184697728%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918471416782184697728&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-23-121427711-null-null.nonecase&utm_term=%E5%85%8D%E5%A4%87%E6%A1%88cdn