我们用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. MySQL 一对多查询，合并多的一方的信息

    select   c.name,  (select   group_concat(name) from student   s   where  s.class_id =c.id ) from  cl ...

  2. 使用HttpClient携带证书报错_Certificate for <IP> doesn't match any of the subject alternative names:[域名]

    使用HttpClient携带pfx证书通过Https协议发送SOUP报文调用WebService接口时报如下错误: Exception in thread "main" javax ...

  3. http缓存之lastModified和etag

    1.cache-control 访问资源 首次访问页面时间:2018.2.1  9:56  (当前时间=GMT时间+8h) 缓存时长max-age:1 day Expire缓存失效时间:2018.2. ...

  4. ASP.NET中图片验证码与js获取验证码的值

    现在的程序中,为了防止用户恶意点击,我们一般都会加上验证,现在比较普遍的是加上图片验证码或者手机短信验证.验证码一般都是防机器不防人,有效的防止了恶意点击. 那么在webform中如何生成动态的图片验 ...

  5. [Luogu1345][USACO5.4]Telecowmunication 最大流

    题目链接:https://www.luogu.org/problem/show?pid=1345 求最小割点集的大小,直接拆点转化成最小割边.把一个点拆成出点入点,入点向出点连一条容量为1的边,其他的 ...

  6. 重构26-Remove Double Negative（去掉双重否定）

    尽管我在很多代码中发现了这种严重降低可读性并往往传达错误意图的坏味道,但这种重构本身还是很容易实现的.这种毁灭性的代码所基于的假设导致了错误的代码编写习惯,并最终导致bug.如下例所示: public ...

  7. 【C++】模板简述(五):类型萃取

    功能 类型萃取,在STL中用到的比较多,用于判断一个变量是否为POD类型. 简述来说可以用来判断出某个变量是内置类型还是自定义类型. 通过类型萃取,萃取到变量类型,对不同变量进行不同处理,可以提升程序 ...

  8. table鼠标滑过变颜色

    table鼠标滑过变颜色 添加 table tr:hover{background-color: #eee;} 设置鼠标滑过行背景变色,重新刷新浏览器页面.  一般设置灰色,eee

  9. webstorm 创建es6项目 babel 转 es5

    node 安装 webstorm 安装 略过 npm install -y //生成package.json npm install babel-cli -g //全局安装babel-cli npm ...

  10. Java 斜杠 与 反斜杠

    除号 /(数字键盘的斜杠)网址 /(数字键盘的斜杠)文件地址 \转义 \正则表达式 \