vue-cli输入命令：npm  run  build 即可打包vue.js的项目

打包出来后项目中就会多了一个文件夹dist，下图为我们打包过后的项目

我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。

解决：到config文件夹中打开index.js文件。

文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性：

assetsPublicPath属性作用是指定编译发布的根目录，‘/’指的是项目的根目录 ，’./’指的是当前目录。

vue.js 打包时出现空白页和路径错误的更多相关文章

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

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

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

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

  3. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  4. maven 打包 时出现非法字符： /65279错误

    maven 打包 时出现非法字符: /65279错误 碰到的一个问题: 使用下面的命令给工程打包时, maven mvn clean package -Ptest01 -Dmaven.test.ski ...

  5. vue打包空白及字体路径错误问题

    vue项目打包后空白 在config/index.js文件中 assetsPublicPath: '/', 改为 assetsPublicPath: './', build: { // Templat ...

  6. chrome浏览器使用jqprint插件打印时偶尔空白页问题

    最近测试老是提bug说是有50%的概率打印出空白页,之前我也一直发现偶尔会出现这个问题,只是一直没有发现原因. 今天终于下定决心找到问题所在.开始吧! 查看源码一行行debug,发现问题只可能出现在这 ...

  7. vue 打包的项目当背景图路径错误

    当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',

  8. vue history模式下出现空白页情况

    问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: imp ...

  9. bottle + vue.js 打造你的单页应用

    看到各种单页应用之后,觉得单页应用简直酷毙了,作为一个技术宅,在假期的 时候恶补了一下vue ,觉得还不错,不过想想前端的东西毕竟还是太广博了.我也不知道怎么写反正应用起来有点别扭,就是资料太少了,成 ...

随机推荐

  1. JS高阶---H5之Web Workers多线程

    大纲: 主体: (1)介绍 (2)案例 编程实现斐波那契数列的计算 递归调用实现案例: Web Workers多线程的新标准并没有改变JS单线程的本质,分离出的子线程完全受主线程控制,且不得操作DOM ...

  2. 201871010107-公海瑜《面向对象程序设计（java）》第6-7周学习总结

    201871010107-公海瑜<面向对象程序设计(java)>第6-7周学习总结                项目                                内容 ...

  3. Vue-cli 中安装并使用less

    首先安装vue-cli,网站教程多多,在这不多说.接下来在vue项目目录下,运行 其他扩展使用方法我放个官网链接,大家可以点击查看 npm install less less-loader --sav ...

  4. cerely-分布式异步任务队列

    Celery 是一个强大的 分布式任务队列 的 异步处理框架,它可以让任务的执行完全脱离主程序,甚至可以被分配到其他主机上运行.我们通常使用它来实现异步任务(async task)和定时任务(cron ...

  5. web服务器获取请求客户端真实地址的方法

    服务器获取客户端或者网页的请求,获取IP时需要注意,因为一个请求到达服务器之前,一般都会经过一层或者多层代理服务器,比如反向代理服务器将http://192.168.1.10:port/ 的URL反向 ...

  6. 复杂模拟 | 1014 模拟K个同时到来的人在N个窗口，每个窗口只能站M个人的银行排队

    这题我以为还是之前银行排队的思路,但是做着做着就做不下去了了.看了答案我才理解到底是什么个思路. 是这样的:不同于之前排队的题,这里的K个人是同时到来的.所以首先应该让K个人的前N*M(也就是黄线内的 ...

  7. Linux性能优化实战学习笔记：第三十六讲

    一.上节总结回顾 上一节,我们回顾了经典的 C10K 和 C1000K 问题.简单回顾一下,C10K 是指如何单机同时处理 1 万个请求(并发连接 1 万)的问题,而 C1000K 则是单机支持处理 ...

  8. Apollo:微服务架构下的配置管理

    问题背景 在实际工作中,我们的开发环境,测试环境,生产环境对应的 Mysql 数据库,Redis 这些信息都不一样,每个环境都有对应的一套配置,在 Spring Boot 中我们通常会编写多个配置文件 ...

  9. SQLAIchemy（二）ORM 相关

    0. 前言 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术 简单的说,ORM是通过使用描述对象和数据库之 ...

  10. Docker remote API

    Docker remote API 该教程基于Ubuntu或Debian环境,如果不是,请略过本文 Docker API 在Docker生态系统中一共有三种API Registry API:提供了与来 ...