将vue+nodejs项目部署到服务器上(完整版)
1、后端使用express生成器
1.1、后台node项目部署
- 在node项目里安装cors依赖(跨域)
npm install cors --save,在app.js文件中使用var cors = require('cors'); app.use(cors()); - 在宝塔面板的wwwroot目录里新建一个文件夹,将node项目上传到这个文件夹中。
- 打开软件商店,安装nginx和pm2管理器
- 在宝塔面板安全和服务器的安全组这里开放后台项目端口
- 打开pm2管理器,添加项目,选择启动文件(如果是express建立的,则选择bin/www)app.js;运行目录选择项目目录;点击提交;
- 点击模块,选择管理,选择一键安装依赖
- 选择项目映射,输入域名(需要在域名解析里),然后提交即可。
1.2、前台vue项目部署
- 配置axios中的默认地址为项目后台的地址
- 在本地vue项目的根目录下创建vue.config.js,代码如下:
1 | module.exports = { |
- 在所有的请求地址里添加/api,如:
1
2
3
4
5
6
7
8this.$axios
.get("/api/liuyan")
.then((response) => {
this.commentdata = response.data;
})
.catch((error) => {
console.log("error", error);
}); - 使用npm run build进行项目打包
- 将打包后的dist文件上传到node项目文件所在的文件夹里,打开宝塔面板,打开网站,添加站点,输入域名,根目录选择dist文件夹,提交。
- 打开网站设置,选择配置文件,在 #禁止访问的文件或目录 前添加以下代码:
1
2
3
4
5
6location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass node后台接口域名;
}
2、后端纯接口(app.js)
2.1 后台node部署
与1.1上面的配置相同,也可以不使用cors模块进行跨域,直接在app.js文件中添加下面的代码:
1 | const app = express(); |
2.2 前台vue部署
不需要创建vue.config.js文件,直接使用npm run build进行打包,并把打包后的dist文件夹上传到服务器上。
在打包前需要配置一下axios的默认请求地址,地址是你的后台项目的映射,比如我的就是
http://backqianlixun.likepoems.com
OK 部署完成
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 如诗!
评论
