我们用vue-cli搭建的项目执行npm build后本地打开页面空白，如果才能查看npm run build之后的结果呢

首先我们看一下提示

  Tip: built files are meant to be served over an HTTP server.

  Opening index.html over file:// won't work.

这段话的意思就是说：构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作，那如何本地查看呢：
（1）到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”即可，就在前面加个点就可以了，

现在再重新打包一次 npm run build，刷新你的页面，就可以看到啦

（2）还有一种就是借助http-server：

首先我们需要安装它命令npm install http-server -g，然后执行npm run build,之后进入打包的目录我这里是cd dist然后执行http-server就可以了

npm run build 打包后，如何查看效果的更多相关文章

  1. npm run build 打包后，如何运行在本地查看效果（Nginx服务）

    这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...

  2. 关于npm run build打包后css样式中的图片失效的问题(如background)

    平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...

  3. npm run build打包后自定义动画没有执行

    问题描述:在vue项目中,当你自己写了一些自定义动画效果,然后你npm run build打包项目放到线上环境后,发现动画并没有效果. 解决办法:在vue项目中找到build文件夹下的vue-load ...

  4. npm run build 打包后（直接打包白屏），如何运行在本地查看效果（Apache服务）

    转载: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端 ...

  5. npm run build 打包后，如何运行在本地查看效果（Apache服务）

    目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...

  6. npm run build 打包后，如何运行在本地查看效果

    目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...

  7. npm run build 打包后空白页解决问题两种情况

    问题一:assetsPublicPath配置错误 解决办法:打开config/index.js文件 build:{        // assetsPublicPath: '/'        ass ...

  8. Vue打包npm run build 打包后空白怎么解决？

    问题一:路径报错并且页面空白 解决:buld/index.js      assetsPublicPath: '/'修改为 assetsPublicPath: './' 问题二:没报错页面空白  ro ...

  9. Vue -- vue-cli(vue脚手架) npm run build打包优化

    这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...

随机推荐

  1. PostgreSQL 9.6.2版本在centOS下的安装和配置

    1.如果有用yum安装过旧版,卸载掉: yum remove postgresql* 2.更新一下yum: sudo yum update 3.去 官网 找到 适合你系统 的资源的下载地址,然后使用w ...

  2. [SDOI2013]spring

    Description Input Output Sample Input 3 3 1 2 3 4 5 6 1 2 3 0 0 0 0 0 0 4 5 6 Sample Output 2 HINT 容 ...

  3. HDU 5558 后缀数组

    思路: 这是一个错误的思路, 因为数据水才过= = 首先求出来后缀数组 把rank插到set里 每回差i两边离i近的rank值,更新 如果LCP相同,暴力左(右)继续更新sa的最小值 //By Sir ...

  4. 选择排序 分类： 算法 c/c++ 2014-10-10 20:32 509人阅读 评论(0) 收藏

    选择排序(假设递增排序) 每次选取从当前结点到末尾结点中最小的一个与当前结点交换,每一轮固定一个元素位置. 时间复杂度O(n^2),空间复杂度O(1).下面的示例代码以带头结点的链表为存储结构: #i ...

  5. matlab实现算术编解码 分类： 图像处理 2014-06-01 23:01 357人阅读 评论(0) 收藏

    利用Matlab实现算术编解码过程,程序如下: clc,clear all; symbol=['abc']; pr=[0.4 0.4 0.2]; %各字符出现的概率 temp=[0.0 0.4 0.8 ...

  6. jQuery Ajax使用实例

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script> <scr ...

  7. SDK manager.exe 运行时报错：系统找不到指定的文件 android.bat

    android studio 2.3.1的 SDK Manager工具 突然没有 Launcher XXX 那个按钮,只好到SDK目录中去启动,无奈发生以下错误. 解决办法:运行android.bat ...

  8. zabbix监控之grafana

    zabbix监控之grafana

  9. CREATE TRIGGER - 定义一个新的触发器

    SYNOPSIS CREATE TRIGGER name { BEFORE | AFTER } { event [ OR ... ] } ON table [ FOR [ EACH ] { ROW | ...

  10. chown - 修改文件所有者和组别

    总览 chown [options] user [:group] file... POSIX 选项: [-R] GNU 选项(最短格式): [-cfhvR] [--dereference] [--re ...