[JavaScript知识库]将vue+nodejs项目部署到服务器上（完整版）

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；运行目录选择项目目录；点击提交；
• 点击模块，选择管理，选择一键安装依赖
• 选择项目映射，输入域名（需要在域名解析里），然后提交即可。

2、前台vue项目部署

• 首先在本地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后台接口域名;
}

🆗部署完成