| 将vue+nodejs项目部署到服务器上（完整版） | 您所在的位置：网站首页 › node跨域cors › 将vue+nodejs项目部署到服务器上（完整版） |
|
本文最后更新于 128 天前，其中的信息可能已经有所发展或是发生改变。 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;"); 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 部署完成 |
| CopyRight 2018-2019 实验室设备网 版权所有 |