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. BeanShell实现加密解密功能

    一,在IDEA中写好加密的脚本 二,然后将整个包文件导出,生成jar包 三,将jar包文件放到jmeter的lib/ext目录下 然后在jmeter的BeanShell中引入该类,调用其中的加密方法 ...

  2. 201871010136—赵艳强《面向对象程序设计（java）》第十三周学习总结

    201871010136—赵艳强<面向对象程序设计(java)>第十三周学习总结   博文正文开头格式:(2分) 项目 内容 <面向对象程序设计(java)> https:// ...

  3. Mysql对表中 数据 查询的操作 DQL

    准备数据,倒入sql文件 运行sql文件 得到四张表 select * from 表名  * 代表全部 1.AS子句作为别名 select studentname as "姓名" ...

  4. <LinkedList> 160

    160. Intersection of Two Linked Lists 分别从AB循环两次.如果第一次没循环到,第二次就会在节点相遇. public class Solution { public ...

  5. web安全编码Demo

    目录: 1.生成安全随机数 2.密码安全存储 3.文件上传 4.SQL注入 一.生成安全随机数 用于生成会话sessionid.防CSRF时的token.以及其他场景下的veritycode. 如下代 ...

  6. Elasticsearch由浅入深（十一）索引管理

    索引的基本操作 创建索引 PUT /{index} { "settings": {}, "mappings": { "properties" ...

  7. SpringBoot第二篇：配置文件详解一

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/10837594.html 版权声明:本文为博主原创文章,转载请附上博文链接! 前言   Sprin ...

  8. 到底如何选择PHP框架？Yii、ThinkPHP、laravel、CI.

    如果你是为了工作和就业,你应该选择框架以工作为目标,看公司里面未来招聘中用的最多的是什么框架.很简单的判断方式 很多朋友都不知道如何去选择框架,选择框架的时候就会很纠结.到底该学什么框架,选择什么框架 ...

  9. POJ 3132 DP+素数筛

    Sum of Different Primes Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 3684   Accepted ...

  10. 全链路追踪技术选型：pinpoint vs skywalking

    目前分布式链路追踪系统基本都是根据谷歌的<Dapper大规模分布式系统的跟踪系统>这篇论文发展而来,主流的有zipkin,pinpoint,skywalking,cat,jaeger等. ...