将vue+nodejs项目部署到服务器上(完整版)
本文最后更新于 548 天前,其中的信息可能已经有所发展或是发生改变。

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 部署完成

本文链接:https://likepoems.com/articles/deploy-the-vue-and-node-project-to-the-server/
转载说明:本站文章若无特别说明,皆为原创,转载请注明来源:likepoems,谢谢!^^

评论

  1. Windows Chrome
    7 月前
    2023-10-12 16:05:04

    你好,看完你的博客文章,感觉很不错!希望与你网站首页友情链接
    流量卡知识网
    http://53go.cn/
    专注于移动/联通/电信推出的大流量多语音活动长短期套餐手机卡的相关知识的介绍普及
    听说互换友情链接可以增加网站的收录量,特此来换,如果同意的话就给internetyewu@163.com[微信ganenboy]发信息或者就在此回复下吧!【建站问题也可以一起讨论!】

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇