Vue.js由于其语法简单,文档友好,而且是一个渐进式框架,因而得到了许多前端开发者的青睐.尤其对初学者而言,入门Vue.js比目前前端三大框架中的另外两个都容易的多.但是同时,简单并不意味着低级,把Vue.js弄会还是需要掌握不少东西的,尤其对于没有接触过webpack构建工具的初学者.
这里列举一些Vue.js常见的开发问题.
1.Vue项目如何部署
Vue.js 的脚手架已经为我们配置好了打包命令,我们只需输入命令npm run build就会在项目下生成一个dist文件夹,这个dist文件夹下的文件即是我们需要的,把这些给后端部署到服务器即可.
2.Vue.js打包后打开一片空白
如果细心,在此情况下,我们打开调试工具,控制台下会报错,里面的静态文件都是not found 状态,看报错的路径会发现,index.html里面引入的路径都指向了根路径,这样如果服务器上的路径是根路径那都没什么问题,但是我们通常都是会加项目路径的,我们通过修改config/index.js里面的配置即可,我们需要改成相对路径,静态文件都是相对index.html的,所以修改成如下
Paste_Image.png
这样再次执行npm run build命令得到的结果即是相对index.html的.同理,我们可以将./换成比如http://www.example.com/test 这样我们就能得到cdn域名,方便做cdn静态化部署.
3.Vue打包后背景图片不见了
这个跟上面的问题差不多,也是路径问题,在vue-cli中,无论我们用怎样的相对路径,最终打包后图片都会生成到staric/img 路径下,上一个问题中,我们把所有的静态资源都是相对./static的,这个是index.html是正确的,但是对css,打包的路径依然是./static/img 这样就会出现在app.css文件中最终的路径是./static/css/static/img 这样就发生了错误. 实际上,你可能会发现小图片都没事,只有大的背景图片会有这种问题,这是因为vue-cli配置了小于10k的资源打包成base64,所以没有这个问题. 实际上,如果你使用了路由懒加载功能,也不会出现这个问题,因为路由懒加载最终的css是以style标签插入到index.html里面的,所以不会有问题,一种简单的解决办法,我们可以把背景图片的样式写成行内样式,直接在元素上写style的背景图片样式,这样因为生成的dom是相对index.html的,所以也能解决,另一种我们可以给webpack里面的css单独处理路径,
Paste_Image.png
在build/utils.js文件的generateLoaders 函数中 加上这个publicPath这个配置项,重新打包即可,这样在css里面生成的路径会是../../static/img 这样就可以正确的找到路径了
4.Vue-cli开发如何跨域
用vue-cli开发的时候我们如果调接口会出现跨域问题,好在vue-cli已经内置了proxy插件,我们正确的配置即可.
Paste_Image.png
,按上述配置,我们调用接口
axios.post('/informationService')
这样再次npm run dev打开项目就没有跨域问题了.
查看原文https://blog.noob6.com/2018/06/04/the-developing-common-problems-in-vue/
网友评论