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. Docker从入门到掉坑(二):基于Docker构建SpringBoot微服务

    本篇为Docker从入门到掉坑第二篇:基于Docker构建SpringBoot微服务,没有看过上一篇的最好读过 Docker 从入门到掉坑 之后,阅读本篇. 在之前的文章里面介绍了如何基于docker ...

  2. svg自适应写法

    svg自适应写法<pre><!DOCTYPE html><html lang="en"> <head> <meta chars ...

  3. containerd 与安全沙箱的 Kubernetes 初体验

    作者 | 易立  阿里云资深技术专家 containerd 是一个开源的行业标准容器运行时,关注于简单.稳定和可移植,同时支持 Linux 和 Windows. 2016 年 12 月 14 日,Do ...

  4. 05-商品类别数据和VUE展示

    一.商品类别数据和VUE展示 1.商品类别数据接口 将商品类别数据展示出来,视图(views.py)代码如下: class CategoryViewset(mixins.ListModelMixin, ...

  5. pat 1046 Shortest Distance(20 分) (线段树)

    1046 Shortest Distance(20 分) The task is really simple: given N exits on a highway which forms a sim ...

  6. hdu 1171 Big Event in HDU (01背包, 母函数)

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  7. 【SSM】自定义属性配置的使用

    首先,建立xxx.properties 文件在resource文件夹中,此处我们自定义的配置文件是oj-config.properties 然后,在applicationContext.xml中注册这 ...

  8. MySQL 1364 错误提示:#1364 - Field "details" doesn't have a default value

    原因:mysql字段设计的时候为not null,结果此字段没有插入值,解决方法: 运行以下命令. SET @@GLOBAL.sql_mode="NO_AUTO_CREATE_USER,NO ...

  9. 精通awk系列(8):awk划分字段的3种方式

    回到: Linux系列文章 Shell系列文章 Awk系列文章 详细分析awk字段分割 awk读取每一条记录之后,会将其赋值给$0,同时还会对这条记录按照预定义变量FS划分字段,将划分好的各个字段分别 ...

  10. 初识JVM内存模型

    计算机内存模型 在程序运行时,CPU通过访问主存获取数据,但随着CPU的快速发展,CPU访问速度越来越高,硬件无法满足CPU的条件下,大多内存加入了高速缓存机制,不同CPU都有对应的多级(一般为三)缓 ...