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.mfbz.cn/a/105394.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

cmake练习一

需求: 1、利用CGAL库Boost库,写一个关于CGAL的程序 2、使用cmake构建 1、创建目录结构 src中有一个main.cpp,放的是我们的主程序代码 2、安装CGAL和Boost库 略 3、编写cmakelist.txt cmake_minimum_required(VERSION 3.1.0) project(cg…

规则推理桌游

目录 Eleusis Express 1,规则 2,出牌规则示例 3,中文规则 Eleusis Express 原文:Eleusis Express 1,规则 简单来说就是需要一个主持人想一个出牌规则,其他人通过出牌试探过程推理出这个出牌规则。 …

甘特图组件DHTMLX Gantt用例 - 如何自定义任务、月标记和网格新外观

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。 本文将为大家揭示DHTMLX Gantt自定义的典型用例,包括自定义任务、网格的新外观等,来展示其功能的强大性&…

电力物联网关智能通讯管理机-安科瑞黄安南

众所周知,网关应用于各种行业的终端设备的数据采集与数据分析,然后去实现设备的监测、控制、计算,为系统与设备之间建立通讯联系,达到双向的数据通讯。 网关可以实时监测并及时发现异常数据,同时自身根据用户规则进行…

[AutoSar NVM] 存储服务层(Service)详解

专栏 《深入浅出AutoSAR》。全文 3400 字, 依AutoSAR及公开知识辛苦整理,禁止转载。 接上一讲 [AutoSar NVM] 存储架构 "数据是新时代的石油" -- 克莱门特•M•杜森堡(Clement M. Dusenbury) 我们深入了解下存储服务层 …

国际腾讯云自主拼装直播 URL教程!!!

注意事项 创建转码模板 并与播放域名进行 绑定 后,转码配置后的直播流,需将播放地址的 StreamName 拼接为 StreamName_转码模板名称,更多详情请参见 播放配置。 前提条件 已注册腾讯云账号,并开通 腾讯云直播服务。 已在 域名…

python二次开发Solidworks:方程式驱动曲线

1、渐开线 import win32com.client as win32 import pythoncomswApp win32.Dispatch(sldworks.application) swApp.Visible True Nothing win32.VARIANT(pythoncom.VT_DISPATCH, None) swModel swApp.ActiveDoc swExt swModel.Extension swSelMgr swModel.SelectionManag…

竞赛 深度学习图像修复算法 - opencv python 机器视觉

文章目录 0 前言2 什么是图像内容填充修复3 原理分析3.1 第一步:将图像理解为一个概率分布的样本3.2 补全图像 3.3 快速生成假图像3.4 生成对抗网络(Generative Adversarial Net, GAN) 的架构3.5 使用G(z)生成伪图像 4 在Tensorflow上构建DCGANs最后 0 前言 &#…

Mysql在ubuntu22.04上安装配置

更新并下载Mysql sudo apt update sudo apt install mysql-server启动Mysql服务 sudo systemctl start mysql安全配置 包括设置密码、删除匿名用户、禁止远程root登录等,按提示进行即可。 sudo mysql_secure_installation是否设置密码:是 三种强度密…

Node.js中的单线程服务器

为了解决多线程服务器在高并发的I/O密集型应用中的不足,同时避免早期简单单线程服务器的性能障碍,Node.js采用了基于"事件循环"的非阻塞式单线程模型,实现了如下两个目标: (1)保证每个请求都可以…

DAY35 435. 无重叠区间 + 763.划分字母区间 + 56. 合并区间

435. 无重叠区间 题目要求:给定一个区间的集合,找到需要移除区间的最小数量,使剩余区间互不重叠。 注意: 可以认为区间的终点总是大于它的起点。 区间 [1,2] 和 [2,3] 的边界相互“接触”,但没有相互重叠。 示例 1: 输入: [ […

Babylonjs学习笔记(六)——贴图的使用

书接上回,这里讨论贴图的运用!!! // 创建球网格const ball MeshBuilder.CreateSphere(ball,{diameter:1},scene)ball.position new Vector3(0,1,0)// 创建PRB材质const ballMat new PBRMaterial(pbr,scene)// albedoTexture 反…

LVS-DR模式+keepalived+nginx+tomcat实现动静分离、负载均衡、高可用实验

实验条件: test2——20.0.0.20——主服务器——ipvsadm、keepalived服务 test3——20.0.0.30——备服务器——ipvsadm、keepalived服务 nginx5——20.0.0.51——后端真实服务器1(tomcat的代理服务器)——nginx服务 nginx6——20.0.0.61—…

python re 使用非捕获组来忽略第一个value的匹配结果

import retext " value1,value2,value3 "pattern r"(?:value\d,){2}value(\d)"match re.search(pattern, text) print(match.group(1)) 其中,(?:...)表示非捕获组,{1}表示匹配前面的模式一次。该正则表达式的含义是&#xff1a…

基于.Net CEF 实现 Vue 等前端技术栈构建 Windows 窗体应用

零、参考资料 1、https://github.com/cefsharp/CefSharp/wiki/Quick-Start-For-MS-.Net-5.0-or-greater 2、https://github.com/cefsharp/CefSharp/wiki/Quick-Start 3、https://github.com/cefsharp/CefSharp/wiki/General-Usage#javascript-integration 一、安装 Nuget 包…

@AutoConfigurationPackage注解类

包名package org.springframework.boot.autoconfigure 方法 String[] basePackages() 向AutoConfigurationPackages中注册的基本包&#xff0c;使用basePackageClasses作为基于字符串的包的类型安全替代方案 Class<?>[] basePackageClasses() 键入basePackage…

抽丝剥茧,Redis使用事件总线EventBus或AOP优化健康检测

目录 前言 Lettuce 什么是事件总线EventBus&#xff1f; Connected Connection activated Disconnected Connection deactivated Reconnect failed 使用 一种另类方法—AOP 具体实现 前言 在上一篇深入浅出&#xff0c;SpringBoot整合Quartz实现定时任务与Redis健康…

使用GoQuery实现头条新闻采集

概述 在本文中&#xff0c;我们将介绍如何使用Go语言和GoQuery库实现一个简单的爬虫程序&#xff0c;用于抓取头条新闻的网页内容。我们还将使用爬虫代理服务&#xff0c;提高爬虫程序的性能和安全性。我们将使用多线程技术&#xff0c;提高采集效率。最后&#xff0c;我们将展…

高等数学教材重难点题型总结(五)定积分

总的来说&#xff0c;只要不定积分掌握得好&#xff0c;基础的定积分肯定没问题&#xff1b;对于考研的话&#xff0c;在定积分定义、牛莱公式、反常积分、审敛法的理解要求更高一些&#xff08;数一还会涉及到伽马函数~&#xff09; 1.利用定义计算定积分 2.定积分的近似计算 …

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

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