当前位置：首页 > news >正文

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

news 2025/6/29 0:50:21

背景

因为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;}
}