使用宝塔进行Nginx部署Vue项目

3,011 阅读1分钟

本文只是给没用过远程服务器的前端小白,资深玩家可以在评论区给些建议

1. 服务器+配置

看你自己的需求了,如果只是自己练习的话,阿里云、腾讯云有很便宜的那种。一年几十块的。

我买的是腾讯云-轻量应用服务器(¥40/年)。够我自己瞎鼓捣了。

  1. 买了服务器,后台登录。关于系统镜像,我直接选择 官方镜像-应用镜像->宝塔Linux面板。

通过这些操作后 就可以图形化配置服务器了。

  1. 配置应用

点击最右侧的 安装按钮即可。等待一会就安装好了。

2.上传本地Vue项目

  1. 本地Vue项目配置vue.config.js的publicPath参数(部署应用包时的基本 URL)
module.exports = {
   ...
  publicPath: IS_DEV ? '/' : '/vue3-album',
  ...
}
  1. 本地vue项目打包 => dist

npm run build

重命名 dist => vue3-album

  1. 上传 vue3-album

3.配置nginx

保存后,需要重启

刚刚配置的时候 修改了一个端口号 9200。需要在安全里放行

访问

浏览器里 IP地址或域名:9200/ 即可访问