vue 各种打包坑
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 各种打包坑的更多相关文章
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
- 【Vue中的坑】Vue打包上传线上报Uncaught SyntaxError: Unexpected token <
今天在vue打包上传线上后,报一下错误,一下就懵了,这可咋整啊,一如既往的想都没想就开始复制错误,上网开搜 Uncaught SyntaxError: Unexpected token < Un ...
- vue项目打包踩坑记
基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- vue项目打包后文本溢出代码消失问题
补充 https://www.cnblogs.com/richard1015/p/8526988.html vue webpack 打包编译-webkit-box-orient: vertical 后 ...
随机推荐
- Linux Shell | 解析xml节点
01 xml文件 # user.xml <user> <name>Toy</name> <sex>man</sex> <room/&g ...
- mount 和 /etc/fstab关系。
mount -a 自动按照格式执行/etc/fstab里面的文件. /etc/fstab 文件格式: device mount-point type options ...
- 品优购(IDEA版)-第二天
品优购-第2天 学习目标 目标1:运用AngularJS前端框架的常用指令 目标2:完成品牌管理的列表功能 目标3:完成品牌管理的分页列表功能 目标4:完成品牌管理的增加功能 目标5:完成品牌管理的修 ...
- 我们碰到了大麻烦,一个新来的传教士惹恼了上帝,上帝很愤怒,要求我们把圣经(bbe.txt)背熟,直至他说哪个单词,我们就要飞快的回答出这个单词在第几行第几个单词位置。听说你是个优秀的程序员,那么髟助我们完成这个不可能的任务吧
编程任务:1.我们碰到了大麻烦,一个新来的传教士惹恼了上帝,上帝很愤怒,要求我们把圣经(bbe.txt)背熟,直至他说哪个单词,我们就要飞快的回答出这个单词在第几行第几个单词位置.听说你是个优秀的程序 ...
- centos6的mysql安装
1.安装mysql服务端 yum install mysql-server yum install mysql-devel 2.下载mysql的压缩包 wget http://dev.m ...
- kubernetes 控制器详解【持续完善中】
目录 资源创建详解 一:Pod及常用参数 1.简介 2.模板 3.删除pod 4.设置Pod主机名 5.镜像拉取策略(ImagePullPolicy) 二:RC 1.简介 2.模板 三:Deploym ...
- 关于Struts.xml的路径配置以及对应的连接路径问题
主要记住一点!: 1. namespace的路径配置例如:/x: 2. name名自由配置(主要用来是做action跳转方法用的) 3. form表单中提交action时以这个格式提交(此 ...
- RHEL7-Vsftpd匿名用户
实现:匿名用户创建目录,可以上传.下载文件,但是不可删除文件,禁止本地用户登陆. Vsftpd.conf部分参数 第一步:虚拟机挂载镜像 略 第二步:执行挂载命令 略 第三步:编写yum仓库文件 略 ...
- ios input输入不了
在项目中遇到了一个问题就是input输入框在安卓可以输入,而在ios输入不了 经过百度,调试发现,在ios中input默认是有user-select: none;属性把input输入框禁用了,将其删除 ...
- Thinkphp5与QueryList,也可以实现采集(爬虫)页面功能
QueryList 是什么 QueryList是一套用于内容采集的PHP工具,它使用更加现代化的开发思想,语法简洁.优雅,可扩展性强.相比传统的使用晦涩的正则表达式来做采集,QueryList使用了更 ...