H5+Vue3编写官网,并打包发布到同一个域名下

背景

因为html5有利于搜索引擎抓取和收录我们网站更多的内容,对SEO很友好,可以为网站带来更多的流量,并且多端适配,兼容性和性能都非常不错,所以使用h5来编写官网首页。
因为用户个人中心可以通过官网跳转,不需要被浏览器抓取,所以为了提高开发效率,减少开发周期,使用vue来开发。

打包

vue3打包

1、 设置publicPath,这个路径将是你整个vue项目的根路径
在这里插入图片描述
2、建议创建一个config.js文件,存放你所有需要访问的外部链接,这样,当外部链接改变的时候,就不需要重新再打包,而是直接更改dist中的config.js(vue会在dist中也生成同一个config.js)

文件放到和inde.html同目录
在这里插入图片描述
并在index.html中引入
在这里插入图片描述
config.js内容
在这里插入图片描述
在页面中使用链接 window.ipConfig.你在config.js中设置的变量
在这里插入图片描述
3、npm run build

h5页面跳转vue页面

直接使用 /person/xxx,就能跳转到vue相应的而页面
/person是vue页面的根目录,xxx是你想要跳转的页面路径

配置nginx

对于h5编写的页面,有多少个就写多少个location

server{listen  80;server_name  www.xxx.com; #你的域名 没有域名的也可以不配置location / {    #官网首页  h5编写的页面root /opt/xxx/website/html;index index_1.html index_1.htm;}location /download{       #h5编写的页面alias /opt/xxx/website/html;index download.html download.htm;}location /doc{            #h5编写的页面alias /opt/xxx/website/html/doc;}location /person{      //配置的vue路径alias /opt/xxx/website/html/dist;  #dist文件地址index index.html index.htm;     #dist index文件try_files $uri $uri/ /dist/index.html;   #加上这句可以避免页面刷新空白}location /xxxx/{        #配置的后端地址代理proxy_pass http://172.xxx.xxx.xxx:9634/xxx/;  #后端地址proxy_set_header Host $http_host;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

开启nginx

开启nginx就可以访问页面啦

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

双目视觉实战--单视图测量方法

目录 一.简介 二、2D变换 1. 等距变换(欧式变换) 2. 相似变换 3. 仿射变换 4. 射影变换(透视变换) 5. 结论 三、影消点与影消线 1. 平面上的线 2. 直线的交点 3. 2D无穷远点 4. 无穷远直线 5. 无穷远点的透视变换与仿…

【01】LVGL-CodeBlock模拟器安装 | LVGL工程下载 | PC端模拟LVGL步骤

LVGL模拟器 1.LVGL模拟器介绍2.Windows环境搭建CodeBlock及获取LVGL工程3.PC端模拟LVGL4.总结 1.LVGL模拟器介绍 LVGL模拟器:使用PC端软件模拟LVGL运行,而不需要任何嵌入式硬件。优点:便于学习、跨平台协同开发 2.Windows环境搭建CodeBlock及…

【Python、Qt】使用QItemDelegate实现单元格的富文本显示+复选框功能

[2023-10-19]代码已更新,完善了单元格宽度不足时省略号的显示问题。 [2023-10-18]代码已更新,追加单元格的文本对齐功能(使用成员函数QStandardItem.setTextAlignment设置单元格的Align。 主打一个 折磨 坑多 陪伴。代码为Python,C的就自己逐…

Python万圣节蝙蝠

目录 系列文章 前言 蝙蝠 程序设计 程序分析 运行结果 尾声 系列文章 序号文章目录直达链接1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want5…

云务器迁移(腾讯云>华为云)

自己平时除了写些bug外还喜欢玩玩服务器,这不前几年买了一个域名,当时服务器买的是阿里云的,想着域名备案挺麻烦的就一直用着,只是在服务器到期后会重新购买其他运营商的(关键是续不起🤫) 这不最…

C/C++ 快速入门

参考:https://blog.csdn.net/gao_zhennan/article/details/128769439 1 下载Visual Studio Code并安装中文插件,此处不再叙述 2 插件安装C/C插件 3 使用快捷键【Ctr ~】打打开终端 验证并未安装编译器 4 我们即将使用【MinGW-64】做为编译器 https:…

程序环境和预处理

导言: 在编写代码的过程中,我们一般都是在一些图形化软件的编译器中实现,编译器帮我们实现了很多操作,这里就一些简单的过程进行说明。本文主要阐述了c语言程序的编译链接以及一些预处理知识,和宏定义的使用。 目录 …

IDEA提高工作效率的实用技巧

IDEA是一款备受开发者喜爱的集成开发环境,它提供了许多实用的功能,可以帮助我们更快速、更高效地编写代码。本文将介绍一些IDEA的使用技巧提高工作效率的实用技巧。 验证正则表达式 要验证编写的正则表达式是否正确,只需将光标放在要检查的…

MongoDB 未授权访问漏洞

简介 MongoDB是一个基于分布式文件存储的数据库,是一个介于关系数据库和非关系数据库之间的产品,它的特点是高性能、易部署、易使用,存储数据非常方便,默认情况下是没有认证的这就导致不熟悉它的研发人员部署后没有做访问控制导致…

C++项目实战——基于多设计模式下的同步异步日志系统-⑩-异步缓冲区类与异步工作器类设计

文章目录 专栏导读异步缓冲区设计思想异步缓冲区类设计异步工作器类设计异步日志器设计异步缓冲区类整理异步工作器类整理 专栏导读 🌸作者简介:花想云 ,在读本科生一枚,C/C领域新星创作者,新星计划导师,阿…

LeetCode算法栈—有效的括号

目录 有效的括号 用到的数据结构: 位运算、Map 和 Stack Stack 常用的函数: 题解: 代码: 运行结果; 给定一个只包括 (,),{,},[,] 的字符串 s ,判断字符…

模拟IIC通讯协议(stm32)(硬件iic后面在补)

一、IIC基础知识总结。 1、IIC通讯需要两条线就可以,SCL、SDA。 2、IIC的数据传输的速率,不同的ic是不同的,根据电平维持的延时函数的时间来确定IIC数据传输的速率. 3、IIC的延时函数可以使用延时函数,延时函数一般使用系统滴答时…

20款VS Code实用插件推荐

前言: VS Code是一个轻量级但功能强大的源代码编辑器,轻量级指的是下载下来的VS Code其实就是一个简单的编辑器,强大指的是支持多种语言的环境插件拓展,也正是因为这种支持插件式安装环境开发让VS Code成为了开发语言工具中的霸主…

Fast DDS之Subscriber

目录 SubscriberSubscriberQosSubscriberListener创建Subscriber DataReaderSampleInfo读取数据 Subscriber扮演容器的角色,里面可以有很多DataReaders,它们使用Subscriber的同一份SubscriberQos配置。Subscriber可以承载不同Topic和数据类型的DataReade…

【QT】QTreeWidget

新建项目 第一步:设置头标签 第二步:设置item 第三步:创建子item,挂载在顶层item下 完整代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::W…

C++项目——云备份-①-项目介绍环境搭建

文章目录 专栏导读1.什么是云备份2.实现目标3.服务端程序负责功能4.服务端功能模块划分5.客户端程序负责功能6.客户端功能模块划分开发环境环境搭建1. gcc 升级7.3版本2.安装 jsoncpp 库3.下载bundle数据压缩库4.下载 httplib 库 专栏导读 🌸作者简介:花…

babel6使用ES2020最新js语法

babel6使用ES2020最新js语法 Babel 6 原本是不支持 ES2020 语法,因为它是在 Babel 7 中引入的。如果您想使用 ES2020 语法,您需要将 Babel 6 升级到 Babel 7 或更高版本(推荐),当然也可以在bebel6中安装支持某个语法的plugin,比如你想使用 ES2020 中的可…

Linux程序调试器——gdb的使用

gdb的概述 GDB 全称“GNU symbolic debugger”,从名称上不难看出,它诞生于 GNU 计划(同时诞生的还有 GCC、Emacs 等),是 Linux 下常用的程序调试器。发展至今,GDB 已经迭代了诸多个版本,当下的…

完美解决 在将最终稿件上传到 IEEE PDF eXpress进行格式检查是出现“font not embedded“的问题 (不会出现自动压缩图像的现象)

最近中了一篇IEEE的论文,在校稿阶段,final paper是需要通过IEEE PDF eXpress网站的格式检查,然后出现一下问题: Errors: Font TimesNewRomanPS-BoldMT, TimesNewRomanPS-ItalicMT, TimesNewRomanPSMT is not embedded 用人话说就…

模式植物GO背景基因集制作

一边学习,一边总结,一边分享! 写在前面 关于GO背景基因集文件的制作,我们在很早以前也发过。近两天,自己在分析时候,也是被搞了头疼。想重新制作一份GO背景基因集,进行富集分析。但是结果&…