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. DNS解析过程--笔试答题版

    在运维笔试的时候,回答DNS解析的过程,不能写一大堆,一是不美观,二是浪费时间,应该怎么写呢?我觉得这样写比较好. 1.客户端:chche----hosts 2.DNS服务器:cache---递归-- ...

  2. 201871010126 王亚涛 《面向对象程序设计（Java）》第七周实验总结

    ---恢复内容开始--- 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com ...

  3. 201871010135 张玉晶《面向对象程序设计（java）》第6-7周学习总结

    201871010135 张玉晶<面向对象程序设计(java)>第6-7周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  4. 【使用篇二】SpringBoot整合Filter（2）

    两种方式: 通过注解扫描完成 Filter 组件的注册 通过方法完成 Filter 组件的注册 一.通过注解扫描完成 Filter 组件的注册 1. 编写Filter类 /** * SpringBoo ...

  5. VIJOS-P1234 口袋的天空

    洛谷 P1195 口袋的天空 https://www.luogu.org/problemnew/show/P1195 JDOJ 1374: VIJOS-P1234 口袋的天空 https://neoo ...

  6. alarm()函数的使用总结

    alarm()函数说明 1.引用头文件:#include <unistd.h>; 2.函数标准式:unsigned int alarm(unsigned int seconds); 3.功 ...

  7. B1042 字符统计 (20 分)

    #include<cstdio> #include<iostream> #include<algorithm> #include<string> usi ...

  8. MySQL实战45讲学习笔记：第二十九讲

    一.引子 我在第25和27篇文章中,和你介绍了主备切换流程.通过这些内容的讲解,你应该已经很清楚了:在一主一备的双 M 架构里,主备切换只需要把客户端流量切到备库:而在一主多从架构里,主备切换除了要把 ...

  9. [LeetCode] 893. Groups of Special-Equivalent Strings 特殊字符串的群组

    You are given an array A of strings. Two strings S and T are special-equivalent if after any number ...

  10. Scala 定义复杂枚举

    通常我们需要枚举参数不止两个,Scala提供的枚举类最多定义两个参数:id:Int与name:String.不能满足我们通常要求. object BaseEntryEnum extends Enume ...