VUE3搭载到服务器

1.搭建服务器

使用 Windows 自带的 IIS 作为服务器。
步骤如下:https://blog.csdn.net/qq_62464995/article/details/130140673

同时,上面的步骤中,还使用了 cpolar 将 IIS 本地网址映射到公共网址。

注:
cpolar客户端: http://localhost:9200/#/dashboard
cpolar监听流量包流量: http://localhost:4040
cpolar官方安装使用教程: https://www.cpolar.com/blog/free-release-of-lan-web-site?channel=0&invite=4W3F

1.1 服务器请求测试代码

上面步骤完成后,终端运行命令:cpolar http 8080
运行结果如图:

python 编写如下代码运行:
import requests

response = requests.get(url='https://7d31446b.r27.cpolar.top') # 根据情况添加
print(response)

可以看到,每次代码运行请求网站均 200 回复OK,说明网站搭建成功。

2.VUE3 搭载到服务器

如图,简单的 VUE 项目开发完成后。

修改vue.config.js文件夹中的内容。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  assetsDir: 'static',
  parallel: false,
  publicPath: './'
})

然后使用终端命令:npm run build
之后 VUE 项目生成 dist 文件。复制dist 文件夹下的内容到服务器映射文件下。

如图,我将 dist 文件夹下面的内容全部复制到我的网站映射文件夹下面。

然后访问网站公共网址。可以看到,VUE3布局生效。如图所示网址以及界面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/414888.html

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

相关文章

【React源码 - 调度任务循环EventLoop】

我们知道在React中有4个核心包、2个关键循环。而React正是在这4个核心包中运行,从输入到输出渲染到web端,主要流程可简单分为一下4步:如下图,本文主要是介绍两大循环中的任务调度循环。 4个核心包: react:…

MySQL 篇-深入了解 DML、DQL 语言(二)

🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 DML、DQL 语言说明 2.0 使用 DML 实现对数据管理和操作 2.1 DML - 增添数据 insert 2.2 DML - 修改数据 update 2.3 DML - 删除数据 delete 3.0 使用 DQL 实现对…

使用.NET 升级助手工具将.net framework4.8 MVC项目升级到net6

1 新建.net framework4.8 MVC项目 随便添加一个可以访问的界面用于测试 2 对当前项目进行升级 注意:若要进行升级,首先确保本地已安装相应的sdk,例如:dotnet-sdk-6.0.402-win-x64.exe1.运行cmd命令窗口,进入项目所在…

【蓝桥杯】快读|min和max值的设置|小明和完美序列|​顺子日期​|星期计算|山

目录 一、输入的三种方式 1.最常见的Scanner的输入方法 2.数据多的时候常用BufferedReader快读 3.较麻烦的StreamTokenizer快读(用的不多) StreamTokenizer常见错误: 二、min和max值的设置 三、妮妮的翻转游戏 四、小明和完美序列 五…

Docker之数据卷自定义镜像

目录 一、数据卷 ​二、自定义镜像 2.1自定义centos 一、数据卷 在docker中,数据卷是宿主机的一个可以供一个或多个容器使用的特殊目录,它可以在容器之间共享和重用,本地与容器间传递数据更高效;对数据卷的修改会立马有效&#…

CSS——PostCSS简介

文章目录 PostCSS是什么postCSS的优点补充:polyfill补充:Stylelint PostCSS架构概述工作流程PostCSS解析方法PostCSS解析流程 PostCSS插件插件的使用控制类插件包类插件未来的CSS语法相关插件后备措施相关插件语言扩展相关插件颜色相关组件图片和字体相关…

代码库管理工具Git介绍

阅读本文同时请参阅-----免费的Git图形界面工具sourceTree介绍 Git是一个分布式版本控制系统,它可以帮助开发者跟踪和管理代码历史。Git的命令行工具是使用Git的核心方式,虽然它可能看起来有些复杂,但是一旦掌握了基本命令,你…

基于MQTT协议实现微服务架构事件总线

一、场景描述 昨天在博客《客户端订阅服务端事件的实现方法》中提出了利用websocket、服务端EventEmitter和客户端mitt实现客户端订阅服务端事件,大大简化了客户端对服务端数据实时响应的逻辑。上述方案适用于单服务节点的情形。 对于由服务集群支撑的微服务架构&…

招聘系统架构的设计与实现

在当今竞争激烈的人才市场中,有效的招聘系统对企业吸引、筛选和管理人才至关重要。本文将探讨招聘系统的架构设计与实现,帮助企业构建一个高效、可靠的人才招聘平台。 ## 1. 系统架构设计 ### 1.1 微服务架构 招聘系统通常采用微服务架构,将…

Java JVM虚拟机面试题

Java JVM虚拟机面试题 前言1、ThreadLocal的底层原理和应用?2、Java中的锁池和等待池?3、wait(),yield(),join(),sleep()的区别?4、你们项⽬如何排查JVM问题?5、YGC和FGC发生时间?6、…

11.vue学习笔记(组件生命周期+生命周期应用+动态组件+组件保持存活)

文章目录 1.组件生命周期2.生命周期应用2.1通过ref获取元素DOM结构2.2.模拟网络请求渲染数据 3.动态组件3.1.A,B两个组件 4.组件保持存活(销毁期) 1.组件生命周期 每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如设置…

探索AI视频模型的无限可能:OpenAI的Sora引领创新浪潮

文章目录 📑前言一、技术解析二、应用场景三、未来展望四、伦理与创意五、用户体验与互动🌤️总结 📑前言 随着人工智能技术的蓬勃发展,AI视频模型正逐渐成为科技领域的新宠。在这个变革的浪潮中,OpenAI推出的首个AI视…

Spring中 Unsupported class file major version 61 报错

初学Spring时遇到的一个错误&#xff1a;Unsupported class file major version 61 &#xff0c;如图所示&#xff1a; 网上查了一下大概是JDK的版本与Spring的版本不一致导致的错误&#xff1b;刚开始我用的Spring版本是&#xff1a; <dependencies><dependency>…

(全部习题答案)研究生英语读写教程基础级教师用书PDF|| 研究生英语读写教程提高级教师用书PDF

研究生英语读写教程基础级教师用书PDF 研究生英语读写教程提高级教师用书PDF pdf下载&#xff08;完整版下载&#xff09; &#xff08;1&#xff09;研究生英语读写教程基础级教师用书PDF &#xff08;2&#xff09;研究生英语读写教程基提高级教师用书PDF

【Pytorch深度学习开发实践学习】Pytorch实现LeNet神经网络(1)

1.model.py import torch.nn as nn import torch.nn.functional as F引入pytorch的两个模块 关于这两个模块的作用&#xff0c;可以参考下面 Pytorch官方文档 torch.nn包含了构成计算图的基本模块 torch,nn.function包括了计算图中的各种主要函数&#xff0c;包括&#…

linux gdb 调试工具

1.写程序 首先&#xff0c;我们先写出一个 .c 或者.cpp程序 如 然后 gcc -g hello.c -o hello 或者 g -g hello.cpp -o hello &#xff08;-g&#xff09;要加 2. gdb调试 用 gdb &#xff08;可执行程序&#xff0c;如hello&#xff09; 进入之后&#xff0c;有…

Window系统安装USB Redirector结合cpolar实现远程访问本地USB设备

文章目录 前言1. 安装下载软件1.1 内网安装使用USB Redirector1.2 下载安装cpolar内网穿透 2. 完成USB Redirector服务端和客户端映射连接3. 设置固定的公网地址 前言 USB Redirector是一款方便易用的USB设备共享服务应用程序&#xff0c;它提供了共享和访问本地或互联网上的U…

物业智能水电抄表管理系统

物业智能水电抄表管理系统是物业管理行业的关键技术之一&#xff0c;其结合了智能化、远程监控和数据分析等功能&#xff0c;为物业管理公司和业主提供了高效、精准的水电抄表管理解决方案。该系统具有多项优势&#xff0c;能够提升物业管理效率&#xff0c;降低成本&#xff0…

[计算机网络]--MAC/ARP/DNS协议

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、认识以…

UnityWebGL UGUI中文不显示问题

这是Unity编辑中效果 打包成webgl后的效果&#xff08;中文没有显示出来&#xff09; 解决方法 将Unity默认使用的Arial替换成中文字体。 1.找到电脑字体库&#xff08;win电脑字体库路径&#xff1a;C:\Windows\Fonts &#xff1b;Mac电脑搜索“字体册”&#xff09;。 2.将…