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

 更新时间:2020年09月02日 11:29:37   作者:ryy6293  
这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

解决办法:

执行下面命令:

npm install http-server -g 全局

然后在dist文件下执行:

http-server

http-server

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

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

相关文章

  • Vue 实现html中根据类型显示内容

    Vue 实现html中根据类型显示内容

    今天小编大家分享一篇Vue 实现html中根据类型显示内容,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue组件与Vue cli脚手架安装方法超详细讲解

    Vue组件与Vue cli脚手架安装方法超详细讲解

    CLI是一个全局安装的npm包,提供了终端里的vue命令。它可以通过vue create快速搭建一个新项目,或者直接通过vue serve构建新想法的原型。你也可以通过vue ui通过一套图形化界面管理你的所有项目
    2022-11-11
  • vue3 逻辑复用的实现示例

    vue3 逻辑复用的实现示例

    在项目开发中,有两个功能特别类似,如果单独实现,会有很多重复的代码,这时候就会用到逻辑复用,本文主要介绍了vue3 逻辑复用的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • 详解Vue 单文件组件的三种写法

    详解Vue 单文件组件的三种写法

    这篇文章主要介绍了详解Vue 单文件组件的三种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue退出登录时清空缓存的实现

    Vue退出登录时清空缓存的实现

    今天小编就为大家分享一篇Vue退出登录时清空缓存的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • VUE表格显示错位的两种解决思路分享

    VUE表格显示错位的两种解决思路分享

    这篇文章主要介绍了VUE表格显示错位的两种解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue.js中$set与数组更新方法

    vue.js中$set与数组更新方法

    下面小编就为大家分享一篇vue.js中$set与数组更新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue实现模糊查询搜索功能的步骤详解

    Vue实现模糊查询搜索功能的步骤详解

    本文主要介绍了Vue实现模糊查询搜索功能的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • vue实现列表滚动的过渡动画

    vue实现列表滚动的过渡动画

    这篇文章主要为大家详细介绍了vue实现列表滚动的过渡动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue之debounce属性被移除及处理详解

    vue之debounce属性被移除及处理详解

    今天小编就为大家分享一篇vue之debounce属性被移除及处理详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论