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/” 这样就 ...
随机推荐
- NRF52840与NRF52832的性能区别
蓝牙版本的不断更新,大部分客户慢慢都向往着蓝牙5.0.当然对于前不久NORDIC刚出的蓝牙5.0 NRF52840,很多人都还不是很了解.NRF52840可以说是NRF52832的超强升级版,虽然同样 ...
- spring-@ResponseBody返回时的编码处理
下面是一个解决方案 @RequestMapping(value = "/queryall", method = GET, produces = "application/ ...
- Spring 控制反转容器(Inversion of Control – IOC)
系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of Contro ...
- 第十九篇 同源策略与Jsonp
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
- 实验3- 熟悉常用的 HBase 操作
石家庄铁道大学信息科学与技术学院 实验报告 2018年----2019年 第一学期 题目: 熟悉常用的 HBase ...
- HDU 5461:Largest Point
Largest Point Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) To ...
- windows driver 获取本地时间
#define ArrayLength 260 void MyGetLocalTime() { LARGE_INTEGER li_system; LARGE_INTEGER li_Local; cha ...
- 4 ~ express ~ 划分模块开发
一,根据功能进行模块划分 1,前台模块 2,后台管理模块 3,API模块 二,使用 app.use() 进行模块划分 1,app.use('/',require('./router/main')) 1 ...
- UML概念
UML UML:Unified Modeling Language是非专利的第三代建模和规约语言.UML是一种开放的方法,用于说明,可视化,结构和编写一个正在开发的,面向对象的,软件密集系统的制品开放 ...
- IDEA的一些常用设置
一.给方法之间添加分割线 效果: 二.自动导包 三.字体以及大小和行间距 四.注释的字体颜色 五.项目编码 六.省点模式(开启省点模式后会取消代码检查和提示等,需要注意) 七.代码垂直或者水平分区显示 ...
