当前位置: 首页 > article >正文

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

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

assetsPublicPath: './'

在这里插入图片描述

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

publicPath: '../../'

在这里插入图片描述

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

npm run build

在这里插入图片描述

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

在这里插入图片描述
5、服务器中如果没有nginx则安装nginx

sudo apt install nginx

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

server {
    listen 80;
    server_name 域名.com;  // 替换为您的域名

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

    index index.html;

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

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

sudo service nginx restart

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

在这里插入图片描述


http://www.kler.cn/a/107585.html

相关文章:

  • 限流算法(令牌通漏桶计数器)
  • 封装el-menu
  • 随手记:简单实现纯前端文件导出(XLSX)
  • ima.copilot-腾讯智能工作台
  • ABC334
  • Kafka - 启用安全通信和认证机制_SSL + SASL
  • C# 图解教程 第5版 —— 第11章 结构
  • Vue3问题:如何实现密码加密登录?前后端!
  • 查询和下载国自然科学基金
  • 算法——贪心算法
  • 适用于嵌入式arm的ffmpeg编解码
  • RedissonCach的源码流程
  • 视频转换器WinX HD Video Converter mac中文特点介绍
  • 在el-dialog中使用tinymce 点击工具栏下拉框被遮挡
  • 分享三个国内可用的免费GPT-AI网站
  • 学习笔记:Splay
  • RTOS编程中的原子操作
  • docker 常用指令
  • SpringAOP源码解析之advice执行顺序(三)
  • phar反序列化
  • ESP8266,手机与电脑之间的TCP通讯
  • 分享一个基于asp.net的供销社农产品商品销售系统的设计与实现(源码调试 lw开题报告ppt)
  • 客户端负载均衡策略:loadBalancer,ribbon
  • HDR图像处理软件 Photomatix Pro mac中文版新增功能
  • 解决Linux下编译Intel oneTBB动态库出错的问题
  • 【电路笔记】-交流电路中的功率