将vue+nodejs项目部署到服务器上的实现
更新时间：2025年03月20日 09:04:24 作者：likepoems
本文主要介绍了将vue+nodejs项目部署到服务器上的实现,使用Express生成器部署和前端Vue项目部署,具有一定的参考价值,感兴趣的可以了解一下
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，代码如下：
module.exports = {
devServer: {
proxy: {
'/api': {
target: "", // node后台接口域名
secure: true, // 如果是https接口，需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '' //需要rewrite的
}
}
}
}
}在所有的请求地址里添加/api，如：
this.$axios
.get("/api/liuyan")
.then((response) => {
this.commentdata = response.data;
})
.catch((error) => {
console.log("error", error);
});使用npm run build进行项目打包
将打包后的dist文件上传到node项目文件所在的文件夹里，打开宝塔面板，打开网站，添加站点，输入域名，根目录选择dist文件夹，提交。
打开网站设置，选择配置文件，在 #禁止访问的文件或目录 前添加以下代码：
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass node后台接口域名;
}2、后端纯接口(app.js)
2.1 后台node部署
与1.1上面的配置相同，也可以不使用cors模块进行跨域，直接在app.js文件中添加下面的代码：
const app = express();
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", " Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Headers","Authorization");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
//方便返回json
res.header("Content-Type", "application/json;charset=utf-8");
if (req.method == 'OPTIONS') {
//让options请求快速返回
res.sendStatus(200);
} else {
next();
}
});2.2 前台vue部署
不需要创建vue.config.js文件，直接使用npm run build进行打包，并把打包后的dist文件夹上传到服务器上。
在打包前需要配置一下axios的默认请求地址，地址是你的后台项目的映射，比如我的就是http://backqianlixun.likepoems.com
OK 部署完成
到此这篇关于将vue+nodejs项目部署到服务器上的实现的文章就介绍到这了,更多相关vue+node项目部署到服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文通过实例代码给大家介绍了Vue隐藏显示、只读功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
这篇文章主要介绍了vue3项目启动自动打开浏览器以及server配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue中的el-date-picker时间选择器的使用实例详解
el-date-picker是Element UI框架中提供的日期选择器组件,它支持单个日期、日期范围、时间、日期时间等多种选择方式,本文给大家介绍Vue中的el-date-picker时间选择器的使用,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要为大家详细介绍了vue+highCharts实现可选范围的图表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue3数据更新,页面没有同步更新的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本篇文章主要介绍了vue父子组件的嵌套的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
监听器是Vue3中非常好用的一个特性,用于监听某个响应式变量的变化,本文就来介绍一下Vue3中使用监听器的具体实践,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vue element-ui动态横向统计表格的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了打通前后端构建一个Vue+Express的开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
今天小编就为大家分享一篇在vue中更换字体,本地存储字体非引用在线字体库的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论