vue-cli:打包后遇到的各种坑

来源:互联网 发布:ps3 xbox360知乎 编辑:程序博客网 时间:2024/06/06 00:12

1.执行:npm run build 后生成的dist打包文件直接放在服务器上显示空白?
解答 :这是因为在在config文件下的index.js中配置的输出文件目录有问题 assetsPublicPath:‘/’默认是这样,我们要改成‘./’当前目录下这里写图片描述
然后在执行 打包 :npm run build
把生成的文件直接放服务器上就ok了!

在服务器上有些图片显示不出来?报错找不到
这是因为在模块加载器的url加载器limt限制大小的关系
这里写图片描述
改成:limit:90000 就可以了 然后重新打包

在服务器上直接刷新网页,然后就找不到网页了。。。?
这里写图片描述
这是因为路由模式我们选择了 html5的 mode模式,去掉mode模式重新打包就可以了

解决在测试环境和正式服务器上数据接口频繁切换的模式?
有时候项目在开发的时候我们的数据请求可能来自测试机,之后正式上线数据来自正式机,我们自己写一个数据调用接口即可如下

api.jslet dev=true   //开发环境设置为true,准备打包时候设置成falseconst test='http://localhost/api/'  //测试机上http请求地址const rel='www.xiaohua.com/api/'   //正式机上数据请求地址const httpUrl=dev?test:rel    //三元判断export default{ httpUrl }   //es6导出之后我要在页面中引用main.jsimport httpUrl from 'api.js' //引入接口文件!注意必须在页面入口js页面直接引入,这样你在那个页面就可以直接引用,不用去重复引用应用index.vuethis.$http.get(httpUrl/prolists).then((res)=>{   console.log(res.data)},(err)=>{})这样做了这个api.js接口文件后,我们只需要更改devtruefalse**这只是我的一点思路!大家可以自行扩展和配置!**最后自己做一下记录,有一次用vue官方提供的脚手架vue-cli搭建项目时候 执行到 npm install那步骤就会报错,于是我直接在根目录下载局部的webpackvue 这样再执行npm install就不报错了 ok了 做下记录
原创粉丝点击