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