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

news2025/1/12 20:52:21

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.coloradmin.cn/o/1137308.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端使用 printJS 插件打印多页:第一页空白问题解决

printJS({printable: [data:image/jpg;base64,${this.printData.url}],type: image,style: media print { page {size: auto; margin: 0; } body{margin:0 5px}} // 解决出现多页打印时第一页空白问题 })

java基础 集合2

9.List遍历方式: 10.Arraylist底层原理: 11.Linklist底层原理: 1.LinkedList做队列和栈: package day01;import java.util.ArrayList; import java.util.Iterator; import java.util.LinkedList; import java.util.List;publ…

Vue3 + Tsx 集成 ace-editor编辑器

Ace Editor介绍 Ace Editor(全名:Ajax.org Cloud9 Editor)是一个开源的代码编辑器,旨在提供强大的代码编辑功能,通常用于构建基于Web的代码编辑应用程序。它最初由Cloud9 IDE开发,现在由开源社区维护。 主…

计算机网络 第四章网络层

文章目录 1 网络层的功能2 数据交换方式:电路交换3 数据交换方式:报文交换4 数据交换方式:分组交换5 数据交换方式:数据报方式6 数据交换方式:虚电路方式及各种方式对比7 路由算法及路由协议8 IP数据报的概念和格式9 I…

数据存储成本降低50%!图匠数据搭载OceanBase全新出发

近日,AI 技术公司 ImageDT 图匠数据(以下简称“图匠”)上线 OceanBase。目前,公司两大核心业务“数货宝”、“数智柜”已全面接入 OB Cloud 云数据库,保障图匠一站式全渠道销售数字化闭环作战平台的每一笔「数据」都算…

浮动面试题

浮动元素特点:

找不到mfc100u.dll怎么解决,总结了多种修复方法帮你解决

首先,让我们来了解一下mfc100u.dll文件是什么?其实,mfc100u.dll是Microsoft Foundation Class(MFC)库中的一个动态链接库文件,它包含了一些常用的类、函数和变量等资源,用于支持Windows应用程序的开发。 那么&#xf…

顺序表的查找(按位查找、按值查找)(数据结构与算法)

顺序表的基本操作:按位查找、按值查找 顺序表的按位查找 GetElem(L, i) :按位查找,获取表L中第 i 个位置元素的值 #define MaxSize 10 //定义最大长度 typedef struct{ElemType data[MaxSize]; //用静态的“数组”存放数据元…

大模型如何商业变现?小i机器人发布华藏大模型生态

华藏通用大模型生态体系由“113”三部分组分,即:一个能力基座一项产品支撑三项服务保障。 今年以来,市场上各类人工智能大模型如雨后春笋,但如何将大模型进行科学的商业变现,成为摆在行业面前的一道难题。在刚刚召开的…

Nginx+cpolar实现内网穿透多个Windows Web站点端口

文章目录 1. 下载windows版Nginx2. 配置Nginx3. 测试局域网访问4. cpolar内网穿透5. 测试公网访问6. 配置固定二级子域名7. 测试访问公网固定二级子域名【总结】: 1. 下载windows版Nginx 进入官方网站(http://nginx.org/en/download.html)下载windows版的nginx 下载…

Postman如何导出接口的几种方法?

本文主要介绍了Postman如何导出接口的几种方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 前言: 我的文章还是一贯的作风,简确用风格(简单确实有用)&a…

Apifox创建团队 项目 接口 邀请成员步骤演示

我们打开Apifox 找到 个人空间 然后 点击新建团队 然后这里 我们输入名字 点击确定 我们的团队就出来了 然后 我们点击新建项目 然后肯定是 http 项目名称输入一下 然后 语言 我们中国肯定是中文的 然后点击确定 建好之后 我们就会进入自己的项目啦 然后 我们可以新建个接…

VScode中配置python环境

声明:本文出自B站UP主---火星动力猿 下载教程点击下面链接 【文档包】VScode配置Python【发布】.zip - 蓝奏云文件大小:2.4 M|https://wwn.lanzouh.com/iG5tn03iqwwh

单例模式及其使用场景

单例模式(Singleton):指在一个系统中某个类只存在一个实例,类中自行实例化,实例向该系统提供统一的访问接口。 单例模式有两种表现形式,饿汉式:类加载时,就进行实例化;懒…

微信小程序获取用户信息

个人博客 微信小程序获取用户信息 个人微信公众号,求关注,求收藏,求指错。 文章概叙 本文主要讲的是小程序获取用户信息的,更新测试时间是2023-10-25 更改原因 首先,官网上的解释是这样的,为了安全合…

零基础入门物流运输小程序制作教程

随着小程序的发展和普及,越来越多的企业和个人选择制作自己的小程序。在这个指南中,我们将从头开始,一步步指导您制作一个运输贸易类型的小程序。 首先,您需要在乔拓云平台上注册并登录。在乔拓云平台的后台中,您将找到…

吉比特c++游戏服务端面经,真的不简单。

先给大家说说我为什么一直要分享这个面经? 众所周知,我们可以根据面经来复盘自己的八股和反思自己在面试过程中没注意到的点,这样就会慢慢做得更好。 我们中的很多人,在学生时代可能没有一个很好的学习规划,就是那种…

Linux C语言开发-D10控制语句if

abs()绝对值函数,头文件为stdlib.h sqrt()开根号函数,头文件为math.h,并且在编译时-lm链接数学库 %.2f是float后的小数只输出两位 判断一个年份是否是润年 1、能被4整除,但不能被100整除的年份是润年 2、…

商机的智能引擎 | 拓世法宝AI智能直播一体机,助您实现商业突破,打造卓越直播带货时代!

在19世纪50年代,美国加州掀起了一场淘金热潮。在这个时期,一位名叫李维斯特劳斯的德国青年也来到了淘金圣地旧金山。当时,淘金生意狼多肉少,李维转而经营起了日用品的小生意。在与一位淘金工人的聊天中,他了解到淘金工…

【ONE·Linux || 网络基础(一)】

总言 主要内容:简述网络传输流程(TCP/IP五层模式概念认知,Mac地址、端口号、网络字节序等),演示socke套接字编程(UDP模式)。 文章目录 总言1、基础简述1.1、计算机网络背景1.2、认识网络协议&a…