vue-cli构建项目常见问题记录

Posted linxue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli构建项目常见问题记录相关的知识,希望对你有一定的参考价值。

一、 There are multiple modules with names that only differ in casing.

这个情况是如果多出引用的组件 有一个地方的引用地址的大小写肯定是写错了 检查一下

二、vue渲染iconfont的时候,用unicode,不能直接放在标签里面,要用v-html=“”来绑定

三,vue-route传递参数的时候,只能用name来跳转?如果用path来跳转,好像获取不到params?vue-route传递参数的时候,一定要在route定义的时候加上 :paramname ,如果不加的话,vue可以获取到,但是url上面不会有显示。

四、vue-cli打包build出来的dist文件夹,如果直接用本地文件的形式打开,是没有效果的。

可以使用本地服务器,最简单的一种就是基于node.js的http-server,使用起来也非常的简单,首先使用npm install http-server -g来全局安装,安装完成之后,在项目文件夹下执行http-server就可以了,在浏览器中打开127.0.0.1:8080(这个是默认的端口号,也可以在命令行-p +端口号 来配置修改。)
如果你的index.html不是在项目的根目录下面,就用127.0.0.1:8080/path/to/index.html这样的方式来访问。

五、vue-cli打包出来的项目,可能会出现图片显示不出来,字体无法显示的问题

这个是因为打包之后的资源路径发生了改变。也有可能是图片路径是js动态引入的,需要再url外面套上一层require(‘url/path/name’)

六、组件的懒加载-懒加载参考文档

let compo1 = ()=>import ‘./component‘

七、安装webpack-bundle-analyzer,可以可视化分析打包后的js文件大小。

const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;
plugins:[
new BundleAnalyzerPlugin()]
如果是在vue-cli项目里面,直接在config.js里面修改bundleAnalyzerReport: true

八、vue-router的params相当于post传参,不带名字,只有值,要用name来跳转才有效果。query相当于get传参,表现为id=1,这样的形式。

九、简化组件引入的相对路径 - 如果是多页面结构的话,components的引用往往前面要加很多个点,写起来比较麻烦。在配置webpack的resolve的时候,可以用alias属性,将绝对路径转化成相对路径。

十、vue-router添加上meta之后,还要用beforeEach函数来判断一下,并不是直接添加就ok克噢。

其他小tip:

  • vue在传props类型为数字的时候,如果不加冒号,会被认为是字符串,前面加上冒号,表示js表达式,就会传过去的是数字了。




以上是关于vue-cli构建项目常见问题记录的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli构建项目 npm run build后应该怎么运行在本地查看效果

vue-cli4构建项目,与vue-cli3构建项目的区别

webpack入门——构建简易版vue-cli

一分钟理清Vue-cli 代码构建步骤。

一分钟理清Vue-cli 代码构建步骤

vue-cli 快速搭建脚手架