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 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
vue路由跳转传参数的方法
May 06 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
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实用函数分享之去除多余的0
2015/02/06 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
Linux操作面试题
2015/02/11 面试题
python OpenCV学习笔记
2021/03/31 Python
python实战之用emoji表情生成文字
2021/05/08 Python