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。我使用的是宝塔面板,直接在面板的安全中添加规则即可访问。

相关推荐
小约翰仓鼠12 分钟前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in14 分钟前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
啊~哈1 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg36782 小时前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
码农101号2 小时前
Linux中shell编程表达式和数组讲解
linux·运维·服务器
HelloWord~2 小时前
SpringSecurity+vue通用权限系统
vue.js·spring boot
是小满满满满吗2 小时前
传输层:udp与tcp协议
linux·服务器·网络
神探小白牙3 小时前
vue-video-player视频保活成功确无法推送问题
前端·vue.js·音视频
Mintimate3 小时前
云服务器 Linux 手动 DD 安装第三方 Linux 发行版:原理与实战
linux·运维·服务器
RussellFans3 小时前
Linux 环境配置
linux·运维·服务器