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. GO 基础学习笔记(1) | 简介

    一.官网查看系列 Golang官网:https://golang.org/ Golang中文网:https://studygolang.com/(推荐) 项目学习网站: https://gowalke ...

  2. python Tesseract安装方法

    python Tesseract安装方法 EXE可执行文件地址:http://download.csdn.net/download/whatday/7740469:下载tesseract-ocr-se ...

  3. PHP更新用户微信信息的方法

    PHP更新用户微信信息的方法 大家都知道 授权登录一次 获取后 再登录就会提示已经授权登录 就没办法重新获得用户信息了 这个时候根据openid来获取了请求user/info这个获取ps:必须关注过公 ...

  4. day2-day3基本数据类型专区

    一.基本数据类型 1.字符串 str (用''or“”表示) 字符串中每个组成部分为字符,python中只要是用引号引起来的都叫字符串 ---特征: 加法 n1 = "alex" ...

  5. 推荐Java五大微服务器及其代码示例教程

    来源素文宅博客:http://blog.yoodb.com/yoodb/article/detail/1339 微服务越来越多地用于开发领域,因为开发人员致力于创建更大,更复杂的应用程序,这些应用程序 ...

  6. 4、Vim编辑器与正则表达式-面试题

    题目 自己写答案

  7. 4. 彤哥说netty系列之Java NIO实现群聊(自己跟自己聊上瘾了)

    你好,我是彤哥,本篇是netty系列的第四篇. 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识. 简介 上一章我们一起学习了Java中的BIO/NIO/AIO的故事,本章将带着大家一起使 ...

  8. EFCore批量操作,你真的清楚吗

    背景 EntityFramework Core有许多新的特性,其中一个重要特性便是批量操作. 批量操作意味着不需要为每次Insert/Update/Delete操作发送单独的命令,而是在一次SQL请求 ...

  9. 构建 DNS 主从复制服务器

    一.主节点配置 1.yum install bind -y 安装 DNS 服务 2.vim /etc/named.conf 编辑 DNS 的配置文件 3.named-checkconf 检查配置文件 ...

  10. shell脚本0——”一切皆文件“, 认识Shell

    一.”一切皆文件“与“管道” 1)管道:grep foo /path/to/file | grep -n -k 3 | more 实际过程与我们直观认为的相反,最好通过实际过程理解.首先运行的是mor ...