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打包空白及字体路径错误问题的更多相关文章

  1. 解决Vue打包后背景图片路径错误问题

    1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...

  2. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  3. vue.js 打包时出现空白页和路径错误

    vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...

  4. vue-cli项目打包出现空白页和路径错误问题

    vue-cli项目打包: 1. 命令行输入:npm  run  build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目. 第一个问题,文件引用路径.我们直接运行打包后的文件夹 ...

  5. vue打包后.woff字体文件路径问题处理

    在执行 npm run build 命令打包后,如果出现 .woff 等字体文件找不到的情况 通过设置 vue-style-loader 打包前缀路径解决

  6. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  7. vue-cli搭建的项目打包之后报“资源路径错误&资源文件找不到“

    此方式vue脚手架是3.0版本,2.0版本见最下面//在项目的根目录下(和package.json文件同级)新建一个文件vue.config.js的文件,将此段代码复制进去.module.export ...

  8. vue打包空白,图片没加载,背景颜色没有渲染出来-配置秘诀

    找到config文件夹下的index.js文件修改一下位置 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将‘/’改为‘./’ 在c ...

  9. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

随机推荐

  1. int类型和char类型的区别

    下面三个定义式的区别: int i = 1; char i = 1; char i = '1'; int用来定义整型变量,char用来定义字符型变量,要清楚的知道三个定义式的区别,可以比较它们在内存中 ...

  2. web前端知识点

    一.CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩 flex:1; 子元素设置,设置子元素如何分配父元素的空间,fl ...

  3. 干货分享:Academic Essay写作套路详解

    你想过如何中立的表达自己吗?大概只有10%不到的同学,会真正重视这个细节.但很多留学生能顺利写完作文已经不容易,还要注意什么中立不中立的.我知道这个标准,对许多同学有些过分,但很残酷的告诉你,这的确是 ...

  4. vue-cli 官方脚手架 eslink配置 恢复serve状态下的打印

    使用官方脚手架 打印会提示保存,主要是eslink的配置(在package.json文件夹里面修改) 配置说明 下面是抄的 "eslintConfig": { "root ...

  5. mybaits入门学习

    学习了简单的mybatis的配置 Bean层: 这个都会很简单 一个完整的Bean 需要getter和setter方法还需要一个空的构造方法和一个满的构造方法. Dao层: 创建一个接口就ok了 pa ...

  6. 编程入门-Eclipse的断点调试

    编程入门-Eclipse的断点调试 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 1>.双击选中你要调试的代码行数 2>.允许方法透视图 3>.进行代码调试 4& ...

  7. c++ opencv 入门

    //类型定义 CvPoint point(2, 3); CvPoint2D32f point1(2, 3); CvPoint3D32f point2(2, 3); CvSize size(2, 3); ...

  8. 关于低成本Sub-1Ghz无线射频方案首选:CMT2110A

    对于现在的无线遥控市场竞争力极大,不过是在成本方面和性能方面大家都希望能做到精打细算,目前超低功耗Sub-1Ghz 首选方案是CMT2110/17A 芯片具有超低成本,高性能灵活的单芯片OOK发射器, ...

  9. Ganglia 安装 No package 'ck' found

    安装ConcurrecyKit,下载地址:https://github.com/concurrencykit/ck   编译安装即可 下面是一个歪果仁的解决办法,不过我没用上 I was buildi ...

  10. stm32cube 安装 patch

    首先正常安装芯片包,然后在设置里面找到当前包存放的位置,默认是: C:\Users\Administrator\STM32Cube\Repository 然后解压 更新包,把更新包里面的文件覆盖到 C ...