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. shell之seq

    seq 用于生成从一个数到另一个数之间的所有整数 seq [选项]... 尾数 seq [选项]... 首数 尾数 seq [选项]... 首数 增量 尾数 例如: 1.  -s 指定分隔符,默认分隔 ...

  2. 怎么安装python3

    解压  这个压缩包 2.把解压后的python文件夹所在的路径配置到环境变量 3.鼠标移动到计算机上---右键---属性----高级系统设置---环境变量,打开如下界面    4.在系统变量里选择pa ...

  3. Spring Boot2.0+中，自定义配置类扩展springMVC的功能

    在spring boot1.0+,我们可以使用WebMvcConfigurerAdapter来扩展springMVC的功能,其中自定义的拦截器并不会拦截静态资源(js.css等). @Configur ...

  4. 海量数据MySQL项目实战

    主要内容包含 MySQL 典型数据库架构介绍.MySQL 主流数据库架构对比等理论性知识,然后从“订单.用户”两个项目实战,抛砖引玉,介绍亿级互联网业务数据库项目如何设计. MySQL 典型数据库架构 ...

  5. TCP数据的传输过程（十）

    建立连接后,两台主机就可以相互传输数据了.如下图所示: 上图给出了主机A分2次(分2个数据包)向主机B传递200字节的过程.首先,主机A通过1个数据包发送100个字节的数据,数据包的 Seq 号设置为 ...

  6. 团队冲刺---Four

    今天的计划: 研究css模板. 昨天做了什么: 寻找css模板,研究界面布局. 遇到的问题: css模板,代码看不太懂,好多标签都不会用.

  7. Computer Network Chapter3 solution

    1.校验和:各数值相加,将溢出位加到最低位,之后将结果取反.若校验和全为0,则说明接收数据正确. 2.停等协议及计算信道利用率:利用率=(L/C)/(L/C+2*传输时延) 3.回退N帧协议(协议5) ...

  8. [POJ1189][BZOJ1867][CODEVS1709]钉子和小球

    题目描述 Description 有一个三角形木板,竖直立放,上面钉着n(n+1)/2颗钉子,还有(n+1)个格子(当n=5时如图1).每颗钉子和周围的钉子的距离都等于d,每个格子的宽度也都等于d,且 ...

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

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

  10. mission3--dp

    A---母牛的故事 题目大意:第一年有一头母牛,每年年初母牛生小母牛,小母牛第四个年头可以开始生小牛. 问第n年有多少头牛. 题解: (1)列出前几项来找规律(2)第i年牛的数量=第i-1年牛的数量+ ...