当前位置: 首页 > 编程笔记 >

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

狄新翰
2023-03-14
本文向大家介绍解决Vue-cli npm run build生产环境打包,本地不能打开的问题,包括了解决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生产环境打包,本地不能打开的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 半路接手一个项目按package进行打包,发现测试打包与生产打包文件数还不一致。请问如何解决。看过https://segmentfault.com/q/1010000039243845?utm_source=tag-newest情况和我一样。换了命令,测试环境打包还是差文件。 解决办法 根据一楼兄弟提示,想要在测试环境打包与生产环境一致。 1、在你的 .env.test文件中第一行添加。不要写NO

  • 本文向大家介绍VueCli生产环境打包部署跨域失败的解决,包括了VueCli生产环境打包部署跨域失败的解决的使用技巧和注意事项,需要的朋友参考一下 常见的跨域配置(/config/index.js): 使用:‘/api/getData' 在开发调试时,使用axios进行数据交互时没问题。但打包部署到服务器上发现404,跨域报错了。研究发现还需要进行配置一下。 config文件夹还有2个文件dev.

  • 21. 打包您的生产环境程序 可执行的jar文件可以用于部署生产环境。由于它们是独立自足的,它们也非常适合基于云的部署。 至于额外的“生产环境”功能,如 ,请考虑添加spring-boot-actuator。详细信息请参阅V. Spring Boot致动器:生产环境功能。

  • 背景: 本地和生产环境加载运行的是同一个字体文件,但是界面展现的字体样式不一样 本地: 线上: 尝试1:可能是缓存问题 清除缓存之后结果一样 尝试2:可能是加载的字体文件不相同 经过排查,加载的字体文件一样 描述补充: 调试时本地和线上环境展示的font-family font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, 宋体

  • 本文向大家介绍如何解决vue打包vendor过大的问题?相关面试题,主要包含被问及如何解决vue打包vendor过大的问题?时的应答技巧和注意事项,需要的朋友参考一下 1、在webpack.base.conf.js新增externals配置,表示不需要打包的文件,然后在index.html中通过CDN引入 2、使用路由懒加载 官网

  • san build是生产环境打包,下面详细说下用法。 使用命令 san build [entry] entry:入口文件,用于编译单一文件,不传入,则从当前工作目录,读取 Config 文件的 pages 配置项。 打包结束之后,build 命令默认会生成产出物报表,效果如下: 参数说明 跟性能相关 --modern 是否使用 modern mode 打包,值为 true 或 false,默认是

  • 本文向大家介绍Vue-cli proxyTable 解决开发环境的跨域问题详解,包括了Vue-cli proxyTable 解决开发环境的跨域问题详解的使用技巧和注意事项,需要的朋友参考一下 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名。 今天翻看代码

  • 本文向大家介绍vue动画打包后失效问题的解决方法,包括了vue动画打包后失效问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 webpack 打包后动画未执行, 就是npm run build后在dist中生成的项目中动画未生效 解决: 找到build文件夹中 得vue-loader.conf.js,把extract的值改为false---如图 下面看下vue-cli 打包后自定义动画未执行