我们用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. shiro错误：Subject does not have permission [user:select]

    使用的是jdbcRealm,在数据库中有相应的权限 错误日志: org.apache.shiro.authz.UnauthorizedException: Subject does not have ...

  2. 洛谷 P1966 火柴排队

    题目描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为:∑(ai​−bi​)2 其中ai​ 表示 ...

  3. jquery中document.ready在两类浏览器中的区别[转]

    DOMready的构建方法不再重复,现代浏览器通过DOMContentLoaded来实现,IE通过readystatechange+doScroll来模拟该方法. 类似jquery中的document ...

  4. 223 Rectangle Area 矩形面积

    在二维平面上计算出两个由直线构成的矩形叠加覆盖后的面积. 假设面积不会超出int的范围. 详见:https://leetcode.com/problems/rectangle-area/descrip ...

  5. [书目20141009]《ReWork》

    ReWork1: ============= 引言篇INTRODUCTION开局篇FIRST 新的现实缷负篇TAKEDOWNS 忘了“现实世界” 哪来的从错误中学习 计划即瞎猜 何必壮大? 工作狂 受 ...

  6. C# .net实现下载，带进度条

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  7. [Tunny]Grunt基础介绍

    [黄映焜/Tunny,20140711] Grunt是一个JavaScript任务管理器,对于需要反复重复的任务,例如压缩.编译.单元测试.代码检查等,自动化工具可以减轻你的劳动,简化你的工作. 本文 ...

  8. WindowsService+Quartz.NET快速搭建

    新建一个Windows服务项目 nuget安装Quartz.NET,我这边使用的是2.3.3版本 1. Service改名 2. 添加安装程序,改名 3. ServiceInstaller->属 ...

  9. 重装macOS环境配置笔记

    由于早些年买mac的时候写代码的经验还不够,导致多年使用后mac上装满了乱七八糟的软件,比如python就有系统自带的,xcode里的,pyenv的,以及brew安装的各种版本,nginx,Apach ...

  10. python学习日记-01

    一. 熟悉 在正式介绍python之前,了解下面两个基本操作对后面的学习是有好处的: (1)基本的输入输出 可以在Python中使用+.-.*./直接进行四则运算. >>> 1+3* ...