vue-cli中自定义路径别名 assets和static文件夹的区别

web前端|js教程

vue-cli,assets,自定义

web前端-js教程

html5 接金币游戏源码,ubuntu字符模式乱码,scrapy爬虫哪个好,eslint php,崇左谷歌seolzw

写在前面：

自助建站网源码,vscode前段h5,ubuntu 声卡 占用,tomcat又叫什么,爬虫 假数据,php 多选值,江阴做seo优化价格多少,上传 网站源码,网站php源码换模板lzw

这是一篇vue-cli的几个小知识点简单介绍，适用于刚接触vue-cli脚手架以及对此方面并不太了解的同学，大佬们绕道。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。

微信红包尾数控制源码,vscode json配置文件,ubuntu上装samba,tomcat 设置不超时,爬虫史蒂夫,php 小数类型,郑州seo优化推广哪家便宜,书店网站源码,苹果cms模板 爱看lzw

静态资源处理：

assets和static文件夹的区别

相信有很多人知道vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。

assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在或者p背景图形式：

说了图片就正好再提一下vue-cli的一个图片有关的配置，下图这个配置的意思是：在10000b 的图片以下进行base64转换，所以如果项目中有些比较小的icon就不用再进行图片精灵的处理了

webpack+vue自定义路径别名

vue-cli 用的是webpack，也可以使用webpack自定义别名这个功能，自定义别名这个功能当你在多层文件夹嵌套的时候不必一层一层找路径，直接使用自定义别名就可以找到文件的位置。

设置方法：

**设置地址：**build文件夹下面的webpack.base.conf.js文件

具体设置：

resolve: { extensions: [.js, .vue, .json],alias: { vue$: vue/dist/vue.esm.js, @: resolve(src), static:path.resolve(__dirname, ../static),//增加这一行代码 } },

使用方式：

使用的时候要像下方截图的B处一样前面要加上一个’~’，这里的webstorm虽然提示报错，我们可以不用管，代码运行是正常的。

解读：

这里给’static’赋予了一个地址，那么在程序中引入路径的时候’~static’就直接可以代替路径’../static’，亲测，这里就算多层嵌套也可以成功找到路径。

清理项目中没用的插件

很多人像我一样，刚开始的会安装很多插件，然后最后在项目中并没有用到。那之前安装的插件太多了，连自己都忘记了安装了哪些插件？

package.json

在上图所示位置，我们项目安装的所有的模块依赖都在这个pageage.json文件中，当我们需要整理一波自己的依赖的时候，可以在这个文件里面找有没有现在已经没用的依赖，可以使用命令行npm remove 模块名字来删除没用的模块。

–save-dev和–save的区别

上面的这些依赖有些只在开发环境里面使用的模块，有的在项目上线之后还是要继续依赖的模块。他们之间的区别就在于我们平时安装模块依赖时的：--save-dev和--save

当你使用--save-dev安装依赖的时候就会放在package.json的devDependencies对象下面，相反的，当你使用--save安装依赖的时候就会出现在dependencies对象下面。

总结：* –save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西。*

关于vue-cli配置之前也写过两篇文章，需要的同学可以看一下：

手摸手教你使用vue-cli脚手架

在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css

后话