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. ProxyPool 代理

    ProxyPool:https://github.com/yucaifuyoyo/ProxyPool github上一个开源项目的proxypool添加一些免费代理IP网站 1.https://www ...

  2. day12_7.12递归函数与算法

    一.递归函数 递归函数是在函数的调用阶段直接或间接的调用自己. 于是下面就是一个简单的递归函数: def func(): print('我调我自己') func() func() 然而结果会报错,因为 ...

  3. C++中int与string的相互转换

    一.int转string 1.c++11标准增加了全局函数std::to_string: string to_string (int val); string to_string (long val) ...

  4. python3对urllib和urllib2进行了重构

    python3对urllib和urllib2进行了重构,拆分成了urllib.request,urllib.response, urllib.parse, urllib.error等几个子模块,这样的 ...

  5. Linux学习笔记-第3天 - 勤能补拙

    学一门技术,基础一定要打牢,多练习是关键,还要尽可能理解其背后的知识.并时刻提醒自己,求知若饥,虚心若愚.

  6. appium--连续滑动

    TouchAction 在之前说过了滑动swip,那种是两点之间的滑动,比如上滑,左滑等.但实际工作中会遇到一些复杂的场景,如九宫格的滑动等待,这时候就要使用TouchAction,TouchActi ...

  7. ORB-SLAM2初步

    一.ORB-SLAM简介 最近开始入坑SLAM,经过简单调研,各位大咖认为,目前最优秀的视觉SLAM系统是ORB-SLAM2,因此对ORB-SLAM2进行了学习. ORB-SLAM2是2015年提出的 ...

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

    一.上节回顾 上一节,我带你学习了 Linux 网络的基础原理.简单回顾一下,Linux 网络根据 TCP/IP模型,构建其网络协议栈.TCP/IP 模型由应用层.传输层.网络层.网络接口层等四层组成 ...

  9. [LeetCode] 694. Number of Distinct Islands 不同岛屿的个数

    Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...

  10. .NetCore 使用k8s部署服务的过程中需要注意的地方以及遇到的问题

    这里开始我准备了3台测试服务器,这里我使用了JumpServer管理起来了,这里我们来看下: Master :192.168.0.236 Node1:192.168.0.237 Node2:192.1 ...