Vue+ElementUI项目打包部署到Ubuntu服务器中

1、修改config/index.js中的assetsPublicPath: '/',修改为assetsPublicPath: './'

bash 复制代码
assetsPublicPath: './'

2、在build/utils.js中增加publicPath: '../../'

bash 复制代码
publicPath: '../../'

3、打开终端,在根目录下执行npm run build进行打包,打包成功后会生成dist

bash 复制代码
npm run build

4、将dist传输到服务器上(我已经把dist重命名为html)


5、服务器中如果没有nginx则安装nginx

bash 复制代码
sudo apt install nginx

6、配置Nginx,编辑Nginx配置文件/etc/nginx/sites-available/default,并将其更改为以下内容

bash 复制代码
server {
    listen 80;
    server_name 域名.com;  // 替换为您的域名

    root /srv/vue/html;  // 替换为您的打包文件所在的路径

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

7、保存并关闭文件后,重新启动Nginx服务

bash 复制代码
sudo service nginx restart

注意:如果没有配置端口规则的话是访问不了的,需要开放你的后端端口和前端端口,后端我的是8088,前端是8080。我使用的是宝塔面板,直接在面板的安全中添加规则即可访问。

相关推荐
银色的白2 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
萌萌哒草头将军3 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
玩转4G物联网4 小时前
零基础玩转物联网-串口转以太网模块如何快速实现与MQTT服务器通信
服务器·物联网·网络协议·tcp/ip·信息与通信·iot·fs100p
爬呀爬的水滴4 小时前
解决Ubuntu24.04版本,右键没有共享选项的问题
linux·服务器·ubuntu·samba·共享文件夹
雾岛心情5 小时前
【黑客与安全】Linux的常用命令之系统架构信息获取系列命令
linux·运维·服务器
卫生纸不够用6 小时前
(三)Linux性能优化-CPU-CPU 使用率
linux·运维·服务器
Shimeng_19897 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
Clownseven7 小时前
Ubuntu 24.04 LTS 长期支持版发布:对服务器用户意味着什么?新特性、升级建议与性能影响初探
linux·服务器·ubuntu
晴天¥7 小时前
第二部分-IP及子网划分
服务器·网络·tcp/ip
wanhengidc7 小时前
高防服务器中高防和硬防之间的区别
运维·服务器·网络