1,报错

Refused to load the image 'http://localhost:8080/favicon.ico'
because it violates the following Content Security Policy directive:
"default-src 'none'". Note that 'img-src' was not explicitly set,
so 'default-src' is used as a fallback.;

 看不懂吧,翻译一下

拒绝加载图像“http://localhost:8080/favicon.ico”

因为它违反了以下内容安全策略指令:

“默认SRC‘none’”。请注意,没有显式设置“img-src”,

所以“default src”用作回退。

 解决办法及原因:打包的时候,改掉了config文件夹中的index.js里面的assetsPublicPath: ‘/’,的路径,所以才导致了这个报错。改回来就ok了。

2,点击路由切换报错下面代码,而且一刷新就跳404;

Uncaught SyntaxError: Unexpected token <
Error: Loading chunk 1 failed.
at HTMLScriptElement.u (bootstrap cda6aba49714b00712f5:103)

 看不懂吧,不懂就对了,我也不懂,但是找到原因

解决办法及原因:这是因为写路由的时候为了好看使用了 mode:'history' 模式去掉 # 号,但是在服务器是不认识去掉#的好链接的,所以返回一个404页面。这个问题官网解释如下,要使用history模式 需要服务器支持,目前对服务器不了解,所以就简单粗暴不用history模式了,问题就解决了。

3,打包后报错如下

Uncaught SyntaxError: Unexpected token <
Uncaught SyntaxError: Unexpected token <
Uncaught SyntaxError: Unexpected token <

 解决办法及原因:因为config 文件夹下面的 index.js 配置 assetsPublicPath:'/'  引用文件是路径是相对更目录来引用的,但我们打包后生成的dist

         文件夹index.html 引入的路径都在当前目录下的static文件夹下,所以只要打包的时候改成assetsPublicPath:'./'就行了,有两处,都要改成'./'哦。

有新的坑在补充。

踩到坑才说明在进步。

逆水行舟,难灭凌云之志!

vue 各种打包坑的更多相关文章

  1. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  2. 【Vue中的坑】Vue打包上传线上报Uncaught SyntaxError: Unexpected token <

    今天在vue打包上传线上后,报一下错误,一下就懵了,这可咋整啊,一如既往的想都没想就开始复制错误,上网开搜 Uncaught SyntaxError: Unexpected token < Un ...

  3. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

  4. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

  5. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...

  6. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  7. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  8. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  9. vue项目打包后文本溢出代码消失问题

    补充 https://www.cnblogs.com/richard1015/p/8526988.html vue webpack 打包编译-webkit-box-orient: vertical 后 ...

随机推荐

  1. [转载]2.8 UiPath中断活动Break的介绍和使用

    一.Break的介绍 Break: 用于结束当前循环. 注意: Break控件只能用于For Each 循环中 二.Break在UiPath中结合For Each循环的使用 1.打开设计器,在设计库中 ...

  2. pandas处理excel的常用方法技巧(上)

    1. 导库 import pandas as pd 2. 读取excel文件 这里要注意的就是第二个参数header如果不设置,pandas会默认把excel的第一行当作columns,header= ...

  3. Vue2.0项目使用bootstrap后提示Module parse failed: Unexpected character

    具体报错如下: 报错原因是: Vue2.0无法识别bootstrap.css中使用的字体,也就是上图中圈出来的地方. 解决方案: // 需要在webpack.config.js增加对不识别文件的处理 ...

  4. mysql双主互为主从配置

    在使用双主互为主从的模式前提是互为主从的两个数据库,表的主键必须是自增的. 环境不多说了 ,多台mysql单实例或单台多实例都可以.多实例的配置请参考:https://www.cnblogs.com/ ...

  5. 数据库05 使用percona软件来进行数据备份

    1.为什么要与用percona来备份 常见的MySQL备份工具 —跨平台性差 —备份时间长.冗余备份.浪费存储空间 mysqldump备份缺点: —效率较低.备份与还原速度慢,锁表(即备份数据库中的一 ...

  6. ansible start canal

    - name: Start canal server shell: source /etc/profile && nohup /opt/canal/bin/startup.sh

  7. 【Stream—6】BufferedStream相关知识分享

    一.简单介绍以下BufferedStream 在前几章的讲述中,我们已经能够掌握流的基本特性和特点,一般进行对流的处理时,系统肩负着IO所带来的开销,调用十分频繁,这时候就应该想个办法减少这种开销,而 ...

  8. FPGA基础(verilog语言)——语法篇(续1)

    上一篇文章提到了FPGA中一个模块基本结构,这篇文章开始介绍语法. 首先,我们学习一门语言都要从这门语言的单词学起,所以verilog中的关键词都有哪些呢?看下面: A:always.assign B ...

  9. maven本地仓库路径和修改

    1.本地仓库,顾名思义,就是Maven在本地存储构件的地方. 注:maven的本地仓库,在安装maven后并不会创建,它是在第一次执行maven命令的时候才被创建 maven本地仓库的默认位置:无论是 ...

  10. Jeewx-Boot 1.1 版本发布,基于SpringBoot的开源微信管家系统

    项目介绍 JeewxBoot是一款基于SpringBoot的开源微信管家系统,采用SpringBoot2.1.3 + Mybatis + Velocity 框架技术.支持微信公众号.微信第三方平台(扫 ...