Vue-cli打包后如何本地查看的操作


Posted in Javascript onSeptember 02, 2020

Vue-cli打包成dist后默认是必须在http服务器环境下才能正常运行。

可以在本地启动一个http-server服务查看,操作步骤如下:

全局安装http-server:

npm install -g http-server

进入dist根目录下

cd dist

再输入指令:

serve

输出serve: Running on port 5000,即服务已经启动,端口号为5000。

以其他的端口号启动:

serve -p 8090

补充知识:vue cli3.0 打包并在本地查看时页面空白问题

根据以下命令对项目进行打包:

npm run build

命令执行完出现

DONE Build complete. The dist directory is ready to be deployed.

INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

看了一下,build complete,嗯完成了,后面的也没有看,直接打开了生成的dist文件夹下的index.html

Vue-cli打包后如何本地查看的操作

Vue-cli打包后如何本地查看的操作

打开后出现一个空白页面,并且控制台是上面这样的。

解决办法:

执行下面命令:

npm install http-server -g 全局

然后在dist文件下执行:

http-server

http-server

Vue-cli打包后如何本地查看的操作

直接打开上面的网址访问就可以了。

以上这篇Vue-cli打包后如何本地查看的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
JS hashMap实例详解
May 26 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
JavaScript this关键字指向常用情况解析
Sep 02 #Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 #Javascript
JavaScript Array.flat()函数用法解析
Sep 02 #Javascript
通过实例解析JavaScript常用排序算法
Sep 02 #Javascript
手把手教你实现 Promise的使用方法
Sep 02 #Javascript
如何基于jQuery实现五角星评分
Sep 02 #jQuery
在vscode 中设置 vue模板内容的方法
Sep 02 #Javascript
You might like
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
python 下载文件的几种方法汇总
2021/01/06 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
工程师岗位职责
2013/11/08 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
作风建设演讲稿
2014/05/23 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
财务统计员岗位职责
2015/04/14 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
创业计划书之网吧
2019/10/10 职场文书