公司长沙建站,网站建设创意报告书,开发手机app,进入公众号提示微信授权失败背景
因为html5有利于搜索引擎抓取和收录我们网站更多的内容#xff0c;对SEO很友好#xff0c;可以为网站带来更多的流量,并且多端适配#xff0c;兼容性和性能都非常不错#xff0c;所以使用h5来编写官网首页。 因为用户个人中心可以通过官网跳转#xff0c;不需要被浏…背景
因为html5有利于搜索引擎抓取和收录我们网站更多的内容对SEO很友好可以为网站带来更多的流量,并且多端适配兼容性和性能都非常不错所以使用h5来编写官网首页。 因为用户个人中心可以通过官网跳转不需要被浏览器抓取所以为了提高开发效率减少开发周期使用vue来开发。
打包
vue3打包
1、 设置publicPath这个路径将是你整个vue项目的根路径 2、建议创建一个config.js文件存放你所有需要访问的外部链接这样当外部链接改变的时候就不需要重新再打包而是直接更改dist中的config.jsvue会在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就可以访问页面啦
