mmall项目--生产环境的适配

• 添加favicon——图标

 

• 线上域名分离，HTML路径的简化

域名规划：

html--------------------------www.

js+css----------------------s.

image-----------------------img.

 

代理配置：

　　发现页面没样式了：

 

发现图片的路径不太对：

 

此时Webpack里面的内容：

 

publicPath:是文件引用的路径， /dist 后面没有 / 。而js和css文件都会自动加一个/。但是url-loader没有这种处理。所以才会有上图的，distresource而不是dist/resource

Path不使用相对路径，在webpack2.0以后的版本，path已经被强制指定为绝对路径了，不再支持相对路径。

 

最后改为：

 

改完之后，页面上js，css，img的路径就对了，虽然页面还是没有样式，但是别着急么~

接下来就要对线上环境做域名的分离了：

 

在真正访问线上的时候，src的内容就不应该是/dist了，应该是s.happymmall.com.

那要如何处理呢？

 

'dev' === WEBPACK_ENV  是用来判断是不是开发环境。如果是的话，就用/dist/ 如果不是的话，就用//s.happymmall.com/mmall-fe/dist/

保存之后，先删掉原先的dist文件，防止冲突，然后执行线上的打包方式 npm run dist

这时候所有的路径就都换过来了。可是为什么还有错呢？是因为代理只配置了一个index啊！！所以，继续配置~~

 

选择 Map Local…

 

Ps:发现了么，有个地方写错了。哎，这个错，我查了半天~~

这样所有的静态文件都能被匹配到了~~o(*￣▽￣*)ブ

现在再看浏览器：

这个错误是因为跨域引用了字体文件。在html中，用标签 link, script等引进来的资源是不受跨域限制的。但是吧，这个字体文件是用css引入的。所以会有跨域限制。现在呢，暂时忽略。

等到上线的时候，在http的头里加一个Access-Control-Allow-Origin 就ok啦

配置其他的代理：

 

 

• 添加dns-prefetch

 

那什么是dns-prefetch呢？

　　dns-prefetch​作用简单说明就是当你浏览网页时，浏览器会加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页链接无需DNS解析，减少浏览者等待时间，提高用户体验。

• 对线上打包结果做回归测试