Flarum config.php url问题(https CDN)

在config.php中只有一个url,如果以不同与此处的网址或者协议(http或者https)访问,会出现图标消失、资源无法访问等错误;

例如config.php中配置的是example.com,用www.example.com访问就会出错;或者是http://example.com,使用https://example.com访问也会出错;

所以要解决的问题如下:

1、http与https:将http强制https,这样又统一又比较安全

2、访问网址不同:将www.example.com重定向到example.com

解决方法:

config.php中都设置为:https://example.com

一、不使用CDN加速的情况下

1、bt面板中开启强制HTTPS,这样所有的顶级域名和二级域名的访问,都会强制为HTTPS,一劳永逸且安全。

2、其次,若想把www二级域名统一为顶级域名,则在解析中,@记录设置为A类型,指向IP;www记录设置为CNAME类型,指向example.com

(这样就不用设置重定向了,域名解析这里就可以实现)

后续查阅资料,301重定向要比上述域名设置更好一些,故把@记录和www记录全部设置为A类型,指向IP,然后在301重定向里吧www.example.com定向成https://example.com。注意:开了301就不要用CNAME解析了,不然出错。

以上可以解决不同协议、不同网址访问出错的问题。

二、使用CDN加速

CDN开通example.com和www.example.com即可,*泛指域名容易出问题,再说用处也不多

CDN加速开通后,域名要解析到分配的网址,即数据先经过该服务器,再访问自己的服务器,可能在自己服务器上的一些设置(如强制HTTPS等)可能会失效,以上是我自己的理解。

所以:

1、在CDN控制台HTTPS配置中添加HTTPS证书(内容+秘钥),以及开启强制跳转HTTP--->HTTPS;这样可以保证所有的请求都是HTTPS请求;(此时服务器面板上设置的强制HTTPS应该是不起效果的,但是还是留着吧)

2、至于网址,CDN申请每个域名都有一个CNAME域名,这样在域名解析处只能CNAME到CDN提供的这个指定的网址(即www.example.com不能解析到example.com),所以需要在宝塔面板中,设置重定向301,将www.example.com重定向为example.com;

这样就可以解决CDN加速的情况下的问题;

在Vue项目中使用CDN加速可以有效减少静态资源的加载时间,提高页面加载速度。以下是配置cdn加速的步骤: 1.在`vue.config.js`文件中添加如下代码: ``` const cdn = { css: [ // 需要使用CDN加速的CSS文件 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css' ], js: [ // 需要使用CDN加速的JS文件 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js', 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js' ] } module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.externals = { vue: 'Vue', 'vue-router': 'VueRouter' } } }, chainWebpack: config => { config.plugin('html').tap(args => { args[0].cdn = cdn return args }) } } ``` 2.在`public/index.html`文件中修改引用CSS和JS文件的代码,使用CDN链接引用: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue App</title> <!-- 引入CDN加速的CSS --> <% if (htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> <% for (let css of htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= css %>" rel="stylesheet"> <% } %> <% } %> </head> <body> <div id="app"></div> <!-- 引入CDN加速的JS --> <% if (htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <% for (let js of htmlWebpackPlugin.options.cdn.js) { %> <script src="<%= js %>"></script> <% } %> <% } %> </body> </html> ``` 3.运行`npm run build`命令打包项目,打包后在`dist/index.html`文件中可以看到CSS和JS文件已经使用CDN加速。 注意:使用CDN加速可能会带来一定的风险,因此需要谨慎选择CDN服务商。同时,如果CDN服务出现故障或不稳定,可能会影响页面的加载速度和稳定性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值