Vue+Express前后端分离部署实践(2)打包上服务器
本文最后更新于 277 天前,其中的信息可能已经有所发展或是发生改变。

(1)前端打包

修改vue.config.js,添加:

publicPath: './'

在前端命令行执行

npm run build

生成的网站文件在dist文件夹中

将其内容上传到网站根目录即可

(2)后端运行

上传backend文件夹到你喜欢的位置。

首先,安装pm2组件


npm install pm2 -g

然后,进入backend文件夹,输入以下代码运行即可。

pm2 start app.js

Windows中可能报错:

无法加载文件 C:\Users\xxx\AppData\Roaming\npm\pm2.ps1,因为在此系统上禁止
运行脚本。

以管理员身份在powershell中执行以下代码,修改相关设置。

set-ExecutionPolicy RemoteSigned

像这样,就运行成功了。

(3)Nginx代理设置

加入以下设置到nginx.conf即可

server {
        listen 80;
        server_name  fzu.xxx.com;

        include /etc/nginx/default.d/*.conf;

        root         /fzu-cpDailySign; #dist内容存放位置
        location /api/{
                proxy_redirect off;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://localhost:23340;
        }
        location /cors/{
                proxy_redirect off;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://localhost:23340;
        }
    }

最后,访问fzu.xxx.com即可进入网站。

DEMO:福州大学今日校园自动签到 (yanqishui.work)

评论

  1. gnail
    Macintosh Chrome 106.0.0.0
    1月前
    2022-10-19 8:42:55

    servername是填写自己的域名吗,如果没有域名咋办他

    • 博主
      gnail
      Android Chrome 105.0.0.0
      1月前
      2022-10-19 9:54:12

      直接填IP也可以

发送评论 编辑评论


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