关于npm run build打包的问题

Question

vue-cli build打包出的静态文件必须放在服务器目录上才能运行吗？为什么呀？ 我打包好的静态项目 没放到服务器目录下自己打开 不会报错(我设置成了相对路径./) 但是页面是空白的。我用hbuilder将这个项目打包成app ，也是空白的，只有在服务器目录下环境下才是好的。求大佬指点怎么解决

Answer 1

fishenal 2017-04-25 20:02:35

console.log(

  '  Tip:\n' +

  '  Built files are meant to be served over an HTTP server.\n' +

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

)

这是build.js里写的， 直接文件读取是无效的，vuejs可能用到必须通过http的服务。

我们的代码肯定最终是为了上线，上线的话作为前端页面肯定是需要启动 http 服务器，静态页面除了自己电脑上看没有别的意义。vuejs build生成的文件必须通过http 服务器才能正常访问。

npm run dev 和 npm run build 是保持同步的，所以在开发的过程中只要保证run dev里的测试项目没问题，是测试环境，然后build之后进行线上部署，你可以启动一个nginx服务，把网站根目录指向 build过后的dist目录，或者写一个shell脚本，叫做部署脚本，他的工作就是 build vuejs做的项目，然后把它拷贝到nginx服务的根目录下，然后重启nginx。

如果前端搞不定这些，就要跟后端配合，毕竟后端也要启那些接口服务。

• 慕莱坞8453724 #1

  看到老师的回答解决了我的问题 但是我联想到混合开发是需要将代码打包到客户端运行 请问这种情况下有解决办法吗？

• fishenal 回复 慕莱坞8453724 #2

  你说的是app调用页面，但页面不还在页面服务器吗，hydrid也是分开部署的，页面就是页面，不可能混到app的代码里，不知道我理解的对不对

Answer 2

dubei 2017-11-09 16:46:47

我打包后放服务器上，服务器上访问（http://localhost:8080/），页面没有显示完整，好像数据没有加载进来，部分数据放到那个db.json文件里，是那个文件没有打包进来吗，还是怎么回事？

 npm  run dev 一点问题没有，怎么打包后，那个db.json文件好像就调不了了，提示找不到，

页面提示也是接口错误，那个db.json模拟的文件要怎么搞

• fishenal #1

  你还是没理解db.json的作用，db.json和dev-server是模拟后端的，上线以后就用线上的数据，比如php写的后端服务，调用真实的数据库。目的是前端可以脱离后端接口独立开发。如果你的数据只是前端用的，也没必要用dev-server和db.json，直接写到组件的js里不就得了

• dubei 回复 fishenal #2

  好的，谢谢