一、搭建环境
1.在服务器上部署node
操作:
(1) 进入 linux 输入 wget -c https://npm.taobao.org/mirrors/node/v10.13.0/node-v10.13.0-linux-x64.tar.xz 下载node 安装包
(2) ls 查看文件是否下载, 确认下载 使用 tar -xvf node-v10.13.0-linux-x64.tar.xz 解压文件
(3) 文件重命名 mv node-v10.13.0-linux-x64 nodejs
(4) 将 /root/nodejs 文件夹移动到 /usr/sbin 目录下, mv /root/nodejs/ /usr/sbin/
(5) 配置软连接(方便全局使用): ln -s /usr/sbin/nodejs/bin/node /usr/local/bin/ln -s /usr/sbin/nodejs/bin/npm /usr/local/bin/
(6)检查安装结果: node -v npm -version
(7)配置淘宝镜像(不是必要): npm install -g cnpm --registry=https://registry.npm.taobao.org
(8)淘宝镜像配置软连接: ln -s /usr/sbin/nodejs/bin/cnpm /usr/local/bin/
(9)在项目文件夹下新建文件夹 cd demo 文件夹 npm init -y 初始化项目生成 package.json 文件夹
(10) 安装 express npm i express -D
(11)创建web 服务程序文件 app.js
(12)编写web服务程序代码, 并上传到指定文件夹下(看文件app.js)
(13)node app.js 启动服务
(14)安装pm2 托管 Node Web 服务程序 安装 cnpm install pm2 -g 创建软连接 ln -s /usr/local/nodejs/bin/pm2 /usr/local/bin/pm2
(15)pm2 启动服务 pm2 start app.js
2.在 linux 安装 nginx (如需要做代理则需要安装)
操作:
(1)下载"nginx-1.9.9.tar.gz"，移动到/usr/local/下 下载地址 https://nginx.org/download/
(2)解压 tar -zxvf nginx-1.9.9.tar.gz
(3)进入 nginx 目录 cd nginx-1.9.9
(4)配置 ./configure --prefix=/usr/local/nginx
(5)执行 make 、 make install 指令
(6)测试是否安装成功: cd到刚才配置的安装目录/usr/loca/nginx/ 执行 ./sbin/nginx -t
正常情况输出: nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
(7)启动nginx: 进入 cd /usr/local/nginx/sbin 目录 启动nginx: ./nginx
(8)配置 nginx 开机自启动: vim /etc/rc.d/rc.local
二、 本地打包项目
1.将 路由改为 history 模式(去除路径中的#)， 设置 base 路径 （看需求是否需要， 建议做修改）
在router => index.js 文件模块中加上 mode： 'history', base: '自定义名字'
2.修改 配置文件 vue.config.js 文件中的build 中的assetsPublicPath , 将 '/' 改为 './' (在Mac 系统下不需做修改, 原因不明)
3.修改 build => utils.js 中的 generateLoaders 中的 options.extract 部分, 增加一行代码 publicPath: '../../' (为了解决background中的图片路径出错问题)
4.将 api => index.js 文件中的地址设置为服务器地址
5.将打包好的文件上传到服务器的指定目录下
三、设置 nginx 代理
1. 配置nginx需要代理的地址
upstream tomcatServer1 {
server 172.xx.xx.128:8080;
}
server {
listen 80;
server_name 172.xx.xx.128;//配置需要请求转发的地址
location / {
# 域名 admin.service.itoken.funtl.com 的请求全部转发到 tomcat_server1 即 tomcat1 服务上
proxy_pass http://tomcatServer1;//要转发的地址
# 欢迎页面，按照从左到右的顺序查找页面
index index.html;
}
}
注意：node项目打包后，config目录下的index.js文件的请求地址需要和nginx的地址保持一致
例如：172.xx.xx.128:80访问项目，项目里面所有用 172.xx.xx.128:8080 都必须替换成 172.xx.xx.128:80/**进行访问，
这样可以防止跨域问题
四. 本地调用外部接口调试解决跨域问题
1.vue.config.js 文件添加以下代码
proxyTable: {
'/api': {
target: '', // 目标接口域名
changeOrigin: true, //是否跨域
secure: true, // https
pathRewrite: {
'^/api': '' //重写接口
}
},
},
例:
proxyTable: {
'/api': {
// 完整接口地址: [https://emily.red:8001/wechat/api](https://emily.red:8001/wechat/api)
target: 'https://emily.red:8001/wechat/', // 目标接口域名
changeOrigin: true, //是否跨域
secure: true, // https
pathRewrite: {
'^/api': '' //重写接口
}
},
},
接口调用时例:
this.$api.post('/api/api/', {}, res => {})