首页 > 程序开发 > web前端 > HTML/CSS >

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

2017-09-05

vue-cli:打包后遇到的各种坑。1 执行:npm run build 后生成的dist打包文件直接放在服务器上显示空白?解答 :这是因为在在config文件下的index js中配置的输出文件目录有问题 assetsPublicPath:‘ ’默认是这样,我们要改成‘ ’当前目录下

1.执行:npm run build 后生成的dist打包文件直接放在服务器上显示空白?

解答 :这是因为在在config文件下的index.js中配置的输出文件目录有问题 assetsPublicPath:‘/’默认是这样,我们要改成‘./’当前目录下这里写图片描述

然后在执行 打包 :npm run build

把生成的文件直接放服务器上就ok了!<喎"https://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxzdHJvbmc+1Nq3/s7xxvfJz9PQ0KnNvMasz9TKvrK7s/bAtKO/sai07dXSsru1vTwvc3Ryb25nPjwvcD4NCjxwPtXiysfS8s6q1NrEo7/pvNPU2Mb3tcR1cmy809TYxvdsaW10z97WxrTz0KG1xLnYz7U8L3A+DQo8cD48aW1nIGFsdD0="这里写图片描述" src="https://www.2cto.com/uploadfile/Collfiles/20170904/2017090410021164.png" title="\" />

改成:limit:90000 就可以了 然后重新打包

在服务器上直接刷新网页,然后就找不到网页了。。。?

这里写图片描述

这是因为路由模式我们选择了 html5的 mode模式,去掉mode模式重新打包就可以了

解决在测试环境和正式服务器上数据接口频繁切换的模式?

有时候项目在开发的时候我们的数据请求可能来自测试机,之后正式上线数据来自正式机,我们自己写一个数据调用接口即可如下

api.js
let dev=true   //开发环境设置为true,准备打包时候设置成false
const test=&#39;https://localhost/api/&#39;  //测试机上http请求地址
const rel=&#39;www.xiaohua.com/api/&#39;   //正式机上数据请求地址
const httpUrl=dev?test:rel    //三元判断
export default{ httpUrl }   //es6导出

之后我要在页面中引用
main.js
import httpUrl from &#39;api.js&#39; //引入接口文件!注意必须在页面入口js页面直接引入,这样你在那个页面就可以直接引用,不用去重复引用

应用
index.vue

this.$http.get(httpUrl/prolists).then((res)=>{
   console.log(res.data)
},(err)=>{

})

这样做了这个api.js接口文件后,我们只需要更改dev是true或false
**这只是我的一点思路!大家可以自行扩展和配置!**

相关文章
最新文章
热点推荐