Vue错误收集

百度地图引用时 报出A Parser-blocking, cross site (i.e. different eTLD+1) script

版权声明：本文为CSDN博主「DegoLee」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/b809220024/article/details/72565978

页面引入百度地图api时

chrome控制台报出问题

 A Parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=2.0&ak=Kpjp7jddqVUhWK5VkrfNt3YNezY88NtR&services=&t=20170517145936, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.See https://www.chromestatus.com/feature/5718547946799104 for more details. 
(anonymous) @ api:1

查了一些资料，大概意思是说 ：页面渲染完成后使用了document.write()
这是不被允许的，
根据上面的提示，把api引用url改成了

http://api.map.baidu.com/getscript?v=2.0&ak=Kpjp7jddqVUhWK5VkrfNt3YNezY88NtR&services=&t=20170517145936

Resource interpreted as Stylesheet but transferred with MIME type text/html

原文作者：一念天堂_5e04    原文地址：https://www.jianshu.com/p/a5d291379a46

vue链入css文件不能使用，能链入但不能使用，并且页面报出警告：

        Resource interpreted as Stylesheet but transferred with MIME type text/html 

那么就是这个css文件不能以css格式输出，一定要来link的时候说明他的类型，比如：

<link rel="stylesheet" type="text/css" href="static/reset.css">

Nginx解决VUE的history模式下刷新404报错

作者：linjiajiam
链接：https://www.jianshu.com/p/5714ec0b9102

 

众所周知，vue的路由模式如果使用history，刷新会报404错误。官方给出了几种解决方式如下：

 

1、之所以写这篇教程，是我们的项目使用到了history模式，报404后。由于我们的项目是放到了Tomcat中，所以选择了网上最简单的一种解决方式，直接在Tomcat中的web.xml中加入以下内容解决：

<error-page>    
    <error-code>404</error-code>    
    <location>/</location>    
</error-page> 

 

 

 2.2、部署目录：/root/server/vue

 

 2.3、assetsPublicPath打包方式为绝对路径

 

 3、具体Nginx配置
我们的项目URL是：http://fat2.test.cn/wap
在/etc/nginx/conf.d目录下，新建一个fat2.test.cn.conf的配置文件，内容如下：

server { 
    listen 80; #监听的端口 
    server_name fat2.test.cn; #监听的URL 
    location / { 
        root /root/server/vue/wap/; #项目路径 
        index /index.html; 
        try_files $uri $uri/ /index.html; #匹配不到任何静态资源，跳到同一个index.html 
    } 
    #error_page 404 /404.html; 
    # redirect server error pages to the static page /50x.html 
    # error_page 500 502 503 504 /50x.html; 
    location = /50x.html { 
        root /usr/share/nginx/html; 
    } 
}

如果出现以下错误，那么肯定是nginx配置与代码静态资源打包方式不匹配: 

参考地址： https://segmentfault.com/q/1010000018588563

 

 后来发现，其实还是 vue index.js 的配置中，我只在dev中修改了assetsPublicPath，build中的assetsPublicPath没改，造成了这个问题，其实就是打包后的static下的js访问地址错误

 

Vue部署的时候问题

• 打包到服务器后，出现资源引用路径的问题
• 打包到服务器后，出现空白页的问题
• 打包到服务器后，出现引入的css的type被拦截转换为"text/plain"问题
• 打包到服务器后，出现路由刷新404的问题

出现资源引用路径的解决方案

一般这个问题是由于在webpack配置打包发布的目录造成的。

情况一.如果是将static与index.html直接放在服务器根目录,也就是说，当前的应用访问的网址如:http://www.xxx.com

解决办法：

配置输出的publiPath:"/"或者"./" 

情况二.直接将打包后的dist文件放在了服务器的根目录，也就是如果需要访问当前的应用，访问的网址如:http://www.xxx.com/dist

解决办法：

首先需要在创建路由实例中增加：

const router = new VueRouter({
    mode: 'history',
    base: '/mobile/',
    scorllBehavior: () => ({
        y: 0
    }),
    routes
});  

然后再打包发布目录:

publiPath:"/dist/"或者"http://www.xxx.com/dist/"

出现由于路由的history模式下刷新当前路由出现404的问题

今天做的应用发布到服务器上，发现当刷新当前路由的时候，就会出现404的状况，其实这是因为当刷新当前页面时候，所需要访问的资源在服务器上找不到，也就是说，我们在VueJs开发应用的过程中，设置路由的路径不是真实存在的路径，并且使用了history模式。

解决办法：

如果是nginx服务器

location / {  # 前后端分离，前端location
    root /home/zd/zd_cloud/dist;
    index /index.html;
    try_files $uri $uri/ /index.html;  # 加上后支持刷新
}

 

需要后端进行配合,参考https://router.vuejs.org/en/essentials/history-mode.html