解决Vue-cli npm run build生产环境打包,本地不能打开的问题

 更新时间:2018年09月20日 10:33:31   作者:zhaoxingpei  
今天小编就为大家分享一篇解决Vue-cli npm run build生产环境打包,本地不能打开的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

问题:

Tip: built files are meant to be served over an HTTP server.

Opening index.html over file:// won't work.

解释:

npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,执行npm run build 命令后,会生成dist目录,里边包含index.html和static文件夹。

npm run build的时候, 一开始就会提示Built files are meant to be served over an HTTP server. Opening index.html over file:// won't work., 在vue-cli的默认配置中, 把assetsPublicPath: '/'改成assetsPublicPath: './',dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在npm run build完成之后执行以下命令:

npm install -g http-server // 该命令只需执行一次, 安装过之后, 以后就不需要重复安装了.

以上这篇解决Vue-cli npm run build生产环境打包,本地不能打开的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • ElementUI Upload源码组件上传流程解析

    ElementUI Upload源码组件上传流程解析

    这篇文章主要为大家介绍了ElementUI Upload源码组件上传流程解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue不通过路由直接获取url中参数的方法示例

    vue不通过路由直接获取url中参数的方法示例

    通过url传递参数是我们在开发中经常用到的一种传参方法,但通过url传递后改如果获取呢?下面这篇文章主要给大家介绍了关于vue如何不通过路由直接获取url中参数的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • el-select组件绑定change事件的踩坑记录

    el-select组件绑定change事件的踩坑记录

    这篇文章主要介绍了el-select组件绑定change事件的踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue-cli3环境变量与分环境打包的方法示例

    vue-cli3环境变量与分环境打包的方法示例

    这篇文章主要介绍了vue-cli3环境变量与分环境打包的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue实现图片拖拽及鼠标滚轮放大缩小的示例代码

    vue实现图片拖拽及鼠标滚轮放大缩小的示例代码

    本文主要给大家介绍如何vue实现图片拖拽及鼠标滚轮放大缩小,文中有详细的代码供大家参考,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-08-08
  • 利用Vue+intro.js实现页面新手引导流程功能

    利用Vue+intro.js实现页面新手引导流程功能

    在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下
    2023-11-11
  • Vue.js状态管理之Pinia与Vuex详解

    Vue.js状态管理之Pinia与Vuex详解

    Pinia和Vuex一样都是是vue的全局状态管理器,其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了名字Pinia,下面这篇文章主要给大家介绍了关于Vue.js状态管理之Pinia与Vuex的相关资料,需要的朋友可以参考下
    2023-02-02
  • vue中响应式布局如何将字体大小改成自适应

    vue中响应式布局如何将字体大小改成自适应

    这篇文章主要介绍了vue中响应式布局如何将字体大小改成自适应,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue 使用vant插件做tabs切换和无限加载功能的实现

    vue 使用vant插件做tabs切换和无限加载功能的实现

    这篇文章主要介绍了vue 使用vant插件做tabs切换和无限加载功能的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue项目在线上服务器访问失败原因分析

    vue项目在线上服务器访问失败原因分析

    这篇文章主要介绍了vue项目在线上服务器访问失败原因分析,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论