1、后端使用express生成器

1.1、后臺node項(xiàng)目部署

• 在node項(xiàng)目里安裝cors依賴(跨域)npm install cors --save，在app.js文件中使用var cors = require('cors'); app.use(cors());
• 在寶塔面板的wwwroot目錄里新建一個(gè)文件夾，將node項(xiàng)目上傳到這個(gè)文件夾中。
• 打開軟件商店，安裝nginx和pm2管理器
• 在寶塔面板安全和服務(wù)器的安全組這里開放后臺項(xiàng)目端口
• 打開pm2管理器，添加項(xiàng)目，選擇啟動(dòng)文件(如果是express建立的，則選擇bin/www)app.js；運(yùn)行目錄選擇項(xiàng)目目錄；點(diǎn)擊提交；
• 點(diǎn)擊模塊，選擇管理，選擇一鍵安裝依賴
• 選擇項(xiàng)目映射，輸入域名(需要在域名解析里)，然后提交即可。

1.2、前臺vue項(xiàng)目部署

• 配置axios中的默認(rèn)地址為項(xiàng)目后臺的地址
• 在本地vue項(xiàng)目的根目錄下創(chuàng)建vue.config.js，代碼如下：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: "",  // node后臺接口域名
                secure: true,  // 如果是https接口，需要配置這個(gè)參數(shù)
                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進(jìn)行項(xiàng)目打包

將打包后的dist文件上傳到node項(xiàng)目文件所在的文件夾里，打開寶塔面板，打開網(wǎng)站，添加站點(diǎn)，輸入域名，根目錄選擇dist文件夾，提交。

打開網(wǎng)站設(shè)置，選擇配置文件，在 #禁止訪問的文件或目錄 前添加以下代碼：

location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass  node后臺接口域名;
}

2、后端純接口(app.js)

2.1 后臺node部署

與1.1上面的配置相同，也可以不使用cors模塊進(jìn)行跨域，直接在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部署

不需要?jiǎng)?chuàng)建vue.config.js文件，直接使用npm run build進(jìn)行打包，并把打包后的dist文件夾上傳到服務(wù)器上。

在打包前需要配置一下axios的默認(rèn)請求地址，地址是你的后臺項(xiàng)目的映射，比如我的就是http://backqianlixun.likepoems.com

OK 部署完成

到此這篇關(guān)于將vue+nodejs項(xiàng)目部署到服務(wù)器上的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue+node項(xiàng)目部署到服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論