庖丁解牛，化腐朽为神奇！vue-cli自定义路径别名、assets和static文件夹的区别、--save-dev和--save的区别

大家还记得被vue-cli脚手架支配的恐惧吗？还记得被webpack打包优化折磨的无助吗？今天我将化身庖丁，手握屠龙之刃，为诸位侠士细细剖析vue-cli的几个小知识点，敬请细阅。

一、自定义路径别名

在vue-cli中，我们可以使用路径别名（alias）来简化导入路径，这对于大型项目或需要频繁导入相同路径的项目非常有用。我们可以通过在vue.config.js文件中添加如下配置来设置路径别名：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '~': path.resolve(__dirname, 'node_modules')
      }
    }
  }
};

现在，我们就可以在代码中使用路径别名来导入模块了，例如：

import { Component } from '@/components/Component.vue';

二、assets和static文件夹的区别

vue-cli项目中，有两个文件夹用于存放静态资源：assets和static。这两个文件夹的主要区别在于，assets文件夹中的文件在打包过程中会被webpack处理，而static文件夹中的文件则不会。

1、assets文件夹

assets文件夹中的文件通常是需要被webpack处理的资源，例如：

• JavaScript文件
• CSS文件
• 图片文件
• 字体文件

webpack会对这些文件进行压缩、优化等处理，以减少最终打包文件的体积和提高加载速度。

2、static文件夹

static文件夹中的文件通常是不需要被webpack处理的资源，例如：

• HTML文件
• Markdown文件
• PDF文件
• Excel文件

这些文件会被直接复制到最终打包目录中，不会经过任何处理。

三、--save-dev和--save的区别

当我们使用npm安装包时，我们可以使用--save或--save-dev选项来指定包的安装类型。

• --save：将包安装到项目依赖中，这意味着该包将被包含在最终打包文件中。
• --save-dev：将包安装到开发依赖中，这意味着该包只在开发环境中可用，不会被包含在最终打包文件中。

一般来说，我们将用于生产环境的包安装到项目依赖中，而将用于开发环境的包安装到开发依赖中。

结语

以上就是vue-cli的几个小知识点，希望对大家有所帮助。如果你还有其他问题，欢迎在评论区留言。