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

在这里插入图片描述

相关文章:

  • 苹果cms模板MXone V10.7魔改版源码 全开源
  • 如何公网远程访问本地WebSocket服务端
  • SQL中使用ROLLUP和CUBE函数轻松生成汇总行
  • MySQL - 为什么索引结构默认使用B+树,而不是其他?
  • 薛定谔的猫重出江湖?法国初创公司AliceBob研发猫态量子比特
  • CentOS 编译安装 nginx
  • 亚信科技:发挥自我优势深入AIGC,并购整合高瞻远瞩致力未来路
  • Java集合类--List集合,Set集合,Map集合
  • 【理论知识:Window Aggregation】flink 窗口聚合功能概述:两种窗口聚合模式的使用例子、功能说明
  • 【JVM】字节码文件的组成部分
  • Ajax学习笔记第二天
  • CCF中国开源大会,中电金信与行业共探AI技术在金融行业的应用和前景
  • npm 彻底卸载
  • 轻量封装WebGPU渲染系统示例<7>-材质多pass(源码)
  • C#使用mysql-connector-net驱动连接mariadb报错
  • Google 是如何开发 Web 框架的
  • [译]CSS 居中(Center)方法大合集
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • AWS实战 - 利用IAM对S3做访问控制
  • CSS盒模型深入
  • ERLANG 网工修炼笔记 ---- UDP
  • java小心机(3)| 浅析finalize()
  • PHP的类修饰符与访问修饰符
  • python_bomb----数据类型总结
  • vue学习系列(二)vue-cli
  • 成为一名优秀的Developer的书单
  • 对象引论
  • 聊聊spring cloud的LoadBalancerAutoConfiguration
  • 马上搞懂 GeoJSON
  • 树莓派 - 使用须知
  •  一套莫尔斯电报听写、翻译系统
  • 国内开源镜像站点
  • #13 yum、编译安装与sed命令的使用
  • (02)Cartographer源码无死角解析-(03) 新数据运行与地图保存、加载地图启动仅定位模式
  • (3)(3.2) MAVLink2数据包签名(安全)
  • (Java)【深基9.例1】选举学生会
  • (二) Windows 下 Sublime Text 3 安装离线插件 Anaconda
  • (附源码)php新闻发布平台 毕业设计 141646
  • (三)终结任务
  • (深入.Net平台的软件系统分层开发).第一章.上机练习.20170424
  • (四)汇编语言——简单程序
  • (提供数据集下载)基于大语言模型LangChain与ChatGLM3-6B本地知识库调优:数据集优化、参数调整、Prompt提示词优化实战
  • (一)Java算法:二分查找
  • (一)硬件制作--从零开始自制linux掌上电脑(F1C200S) <嵌入式项目>
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • (转)c++ std::pair 与 std::make
  • (转)Linq学习笔记
  • (转)创业家杂志:UCWEB天使第一步
  • (转)人的集合论——移山之道
  • .Net CF下精确的计时器
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .Net IOC框架入门之一 Unity
  • .NET 中 GetProcess 相关方法的性能
  • .NET导入Excel数据
  • .NET企业级应用架构设计系列之结尾篇