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就可以访问页面啦

相关推荐
lichong9511 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
知识分享小能手11 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
禁默14 分钟前
已知 inode 号,如何操作文件?Ext 文件系统增删查改底层逻辑拆解
linux·服务器·数据库
许怀楠20 分钟前
【Linux】基础指令(下)
linux
咕咚.萌西34 分钟前
RISC-V开发环境搭建
linux·硬件架构·risc-v
NiKo_W2 小时前
Linux 初识
linux·运维·服务器
磊灬泽6 小时前
【日常错误】鼠标无反应
linux·windows
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
前端工作日常9 小时前
我学习到的Vue2.6的prop修饰符
vue.js