使用vue-cli脚手架构建vue项目 vue init webpack project

npm run build 打包时出现

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

这段话的意思就是说：构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。

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

直接本地打开index.html 显示 Failed to load resource: net::ERR_FILE_NOT_FOUND

如何解决本地无法打开index.html问题

到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”即可，就在前面加个点就可以了，

现在再重新打包一次 npm run build，刷新你的页面，就可以看到啦

vue项目打包问题的更多相关文章

  1. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  2. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  3. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  4. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  5. vue项目打包，生成dist文件夹，如何修改文件夹的名字

    vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...

  6. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

  7. vue项目打包-2-九五小庞

    vue项目打包 一.终端运行命令 npm run build 二.打包成功的标志与项目的改变,如下图: 3.点击index.html,通过浏览器运行,出现以下报错,如图: 四.那么应该如何修改呢?具体 ...

  8. vue项目打包成html，在本地点击直接能打开

    默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config-& ...

  9. cordova+vue 项目打包成Android（apk）应用

    现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...

随机推荐

  1. Django之--网页展示Hello World!

    上一篇:Django的安装启动完毕后,本文来试下hello world的效果~ 好吧,又开始了喜闻乐见的Hello World环节,本文使用Linux环境演示(Windows太麻烦). [root@p ...

  2. sqlserver备份

    /// <summary> /// sqlserver备份 /// </summary> public class SqlserverBack : IBack { privat ...

  3. kali系统固化到固态硬盘小记（赠送给广大折腾党的笔记）

    1.首先你需要一个移动硬盘和一个移动硬盘盒子(一根数据转换线,一般买盒子商家会赠送的) SSD硬盘要事先格式化一下格式,不然识别不出来 2.准备好Kali镜像,传送门在这里https://www.ka ...

  4. java操作elasticsearch实现组合桶聚合

    1.terms分组查询 //分组聚合 @Test public void test40() throws UnknownHostException{ //1.指定es集群 cluster.name 是 ...

  5. Python里面search()和match()的区别

    转自https://www.cnblogs.com/aaronthon/p/9435967.html match()函数只检测字符串开头位置是否匹配,匹配成功才会返回结果,否则返回None searc ...

  6. Angular中ui-router实现路由嵌套案例

    学习 ui-router 资料整理 对于Angular内置的路由是单路由视图,ui-router可以实现路由嵌套.后面将会有一个案例概括前面所有资料整理 学习 ui-router - 管理状态  ht ...

  7. chrome postman插件手动安装

    注:转自 http://blog.csdn.net/u010246789/article/details/51481134 1.下载postman插件,可以自己到网上下载,也可以点击http://do ...

  8. java语言的特征

    运行时:反射与内省+派发机制: 额外的多态支持:注解: 语法改进:内部类与匿名类.匿名函数: 线程支持改进: 类加载机制? aop的支持: bean?

  9. 转://使用insert插入大量数据的总结

    使用insert插入大量数据的个人经验总结在很多时候,我们会需要对一个表进行插入大量的数据,并且希望在尽可能短的时间内完成该工作,这里,和大家分享下我平时在做大量数据insert的一些经验. 前提:在 ...

  10. P2080 增进感情（背包DP）

    思路:将好感度x+y作为体积, 幸福度x-y作为作为价值, 然后就是一个经典的背包问题了.emmmmm,还可以特判一下,因为幸福度为0时就是最小了,没有必要看后面的了吧. 其实,我自己做的时候,沙雕的 ...