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 后 ...
随机推荐
- [转载]2.8 UiPath中断活动Break的介绍和使用
一.Break的介绍 Break: 用于结束当前循环. 注意: Break控件只能用于For Each 循环中 二.Break在UiPath中结合For Each循环的使用 1.打开设计器,在设计库中 ...
- pandas处理excel的常用方法技巧(上)
1. 导库 import pandas as pd 2. 读取excel文件 这里要注意的就是第二个参数header如果不设置,pandas会默认把excel的第一行当作columns,header= ...
- Vue2.0项目使用bootstrap后提示Module parse failed: Unexpected character
具体报错如下: 报错原因是: Vue2.0无法识别bootstrap.css中使用的字体,也就是上图中圈出来的地方. 解决方案: // 需要在webpack.config.js增加对不识别文件的处理 ...
- mysql双主互为主从配置
在使用双主互为主从的模式前提是互为主从的两个数据库,表的主键必须是自增的. 环境不多说了 ,多台mysql单实例或单台多实例都可以.多实例的配置请参考:https://www.cnblogs.com/ ...
- 数据库05 使用percona软件来进行数据备份
1.为什么要与用percona来备份 常见的MySQL备份工具 —跨平台性差 —备份时间长.冗余备份.浪费存储空间 mysqldump备份缺点: —效率较低.备份与还原速度慢,锁表(即备份数据库中的一 ...
- ansible start canal
- name: Start canal server shell: source /etc/profile && nohup /opt/canal/bin/startup.sh
- 【Stream—6】BufferedStream相关知识分享
一.简单介绍以下BufferedStream 在前几章的讲述中,我们已经能够掌握流的基本特性和特点,一般进行对流的处理时,系统肩负着IO所带来的开销,调用十分频繁,这时候就应该想个办法减少这种开销,而 ...
- FPGA基础(verilog语言)——语法篇(续1)
上一篇文章提到了FPGA中一个模块基本结构,这篇文章开始介绍语法. 首先,我们学习一门语言都要从这门语言的单词学起,所以verilog中的关键词都有哪些呢?看下面: A:always.assign B ...
- maven本地仓库路径和修改
1.本地仓库,顾名思义,就是Maven在本地存储构件的地方. 注:maven的本地仓库,在安装maven后并不会创建,它是在第一次执行maven命令的时候才被创建 maven本地仓库的默认位置:无论是 ...
- Jeewx-Boot 1.1 版本发布,基于SpringBoot的开源微信管家系统
项目介绍 JeewxBoot是一款基于SpringBoot的开源微信管家系统,采用SpringBoot2.1.3 + Mybatis + Velocity 框架技术.支持微信公众号.微信第三方平台(扫 ...