vue打包空白及字体路径错误问题
vue项目打包后空白
在config/index.js文件中 assetsPublicPath: '/', 改为 assetsPublicPath: './',
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //在这里将''改成 './'
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
vue项目打包后背景图路径多了/css/static
在build/utils.js文件中添加publicPath:'../../'
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {

vue打包空白及字体路径错误问题的更多相关文章
- 解决Vue打包后背景图片路径错误问题
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- vue.js 打包时出现空白页和路径错误
vue-cli输入命令:npm run build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...
- vue-cli项目打包出现空白页和路径错误问题
vue-cli项目打包: 1. 命令行输入:npm run build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目. 第一个问题,文件引用路径.我们直接运行打包后的文件夹 ...
- vue打包后.woff字体文件路径问题处理
在执行 npm run build 命令打包后,如果出现 .woff 等字体文件找不到的情况 通过设置 vue-style-loader 打包前缀路径解决
- Vue项目打包后背景图片路径错误
vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...
- vue-cli搭建的项目打包之后报“资源路径错误&资源文件找不到“
此方式vue脚手架是3.0版本,2.0版本见最下面//在项目的根目录下(和package.json文件同级)新建一个文件vue.config.js的文件,将此段代码复制进去.module.export ...
- vue打包空白,图片没加载,背景颜色没有渲染出来-配置秘诀
找到config文件夹下的index.js文件修改一下位置 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将‘/’改为‘./’ 在c ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
随机推荐
- POJ - 3264 Balanced Lineup(线段树或RMQ)
题意:求区间最大值-最小值. 分析: 1.线段树 #include<cstdio> #include<cstring> #include<cstdlib> #inc ...
- JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Java多线程之Java内存模型
如果要了解Java内存模型,就得对多线程的三大特性有初步的了解. 1.原子性:独一无二.一个操作或者多个操作 要么全部执行并且执行的过程不会被任何因素打断,要么就都不执行.比如i = i+1:其中就包 ...
- word中替换内容
参考了一篇文章 然后做了如下修改 用python的win32com模块替换word中的文字搞定批量打印奖状 python 操作 office python操作word # -*- coding: u ...
- 157-PHP strrchr函数输出最后一次出现字母p的位置到字符串结尾的所有字符串
<?php $str='PHP is a very good programming language!'; //定义一个字符串 echo strrchr($str,'o'); //输出最后一次 ...
- ActiveMQ消息队列和SignalR之日志实时监控及警报小实例
主要技术: log4net-生成日志. ActiveMQ-生成日志的时候发送消息,并实时监控日志. SignalR-将ActiveMQ监控的日志实时显示到浏览器上,而不用刷新浏览器. 小实例介绍: 左 ...
- 【LGR-(-8)】洛谷入门赛 #5 题解
比赛链接 9道题. 注:题目名称中链接为题目链接,题号中链接为比赛内链接 题目编号 洛谷题号 题目名称 题目难度 A P5713 [深基3.例5]洛谷团队系统 \(\color{red}{入门}\) ...
- 三、ReactJS、jsx、 Component 特性
reactjs特性: 基于组件(Component)化思考 用 JSX 进行声明式(Declarative)UI 设计 使用 Virtual DOM Component PropType 错误校对机制 ...
- 在Centos安装redis-孙志奇
最近在阿里云服务器上部署redis,遇到了很多的问题,经过不懈的努力终于配置成功, 按照下面的步骤一步一步来就好了 wget http://download.redis.io/releases/red ...
- SciKit-Learn 数据集基本信息
## 保留版权所有,转帖注明出处 章节 SciKit-Learn 加载数据集 SciKit-Learn 数据集基本信息 SciKit-Learn 使用matplotlib可视化数据 SciKit-Le ...
