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

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.lryc.cn/news/209909.html

相关文章:

  • 面试题收集——Java基础部分(一)
  • Vue中this指向问题
  • 【iPad已停用】解锁教程
  • python不调用heapq库 实现大顶堆,小顶堆
  • STM32F4X SDIO(二) SDIO协议
  • 设计模式--7个原则
  • AltiumDesigner原理图编译错误报告信息解释
  • 使用 Visual Studio Code 编写 TypeScript程序
  • 科大讯飞发布讯飞星火 3.0;开源AI的现状
  • 公网远程访问macOS本地web服务器
  • windows 安装小乌龟
  • toon boom harmony基础
  • JPA联合主键
  • 水性杨花:揭秘CSS响应式界面设计,让内容灵活自如,犹如水之变幻
  • fio performance test
  • DevOps持续集成-Jenkins(1)
  • Pytorch代码入门学习之分类任务(二):定义数据集
  • oracle 里常用的一些 create insert update table
  • 从Mysql架构看一条查询sql的执行过程
  • Linux系统下DHCP服务安装部署和使用实例详解(蜜罐)
  • 模数转换器-ADC基础
  • Linux:【1】Linux中的文件权限概念和相关命令
  • JS实用小计
  • Android---Bitmap详解
  • 设计高信度和效度的问卷:关键要点与技巧
  • 从工厂到社会:探索如何应用设计模式工厂模式
  • slice()和splice()用法
  • 基于windows10的pytorch环境部署及yolov8的安装及测试
  • 面试算法40:矩阵中的最大矩形
  • was下log4j设置日志不输出问题