【vue】框架项目中常见的一些配置文件_vue配置文件

webpack.config.js和vue.config.js的区别

• webpack.config.js是webpack的配置文件，所有使用webpack作为打包工具的项目都可以使用，vue的项目可以使用，react的项目也可以使用。

• vue.config.js是vue项目的配置文件，专用于vue项目。通过vue.config.js中常用功能的配置，简化了配置工作

vue-cli3创建的时候并不会自动创建vue.config.js,因为这个是可选项，因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去webpack做了什么，所以没有暴露webpack的配置文件，但你依然可以创建vue.config.js去修改默认的webpack

---

vue-cil中可以直接使用webpack.config.js吗？还是说必须要在vue.config.js中配置打包

默认情况下，Vue CLI 使用的是基于 webpack 的工具链来构建 Vue 应用。因此，如果你想覆盖默认的构建配置，最好的做法是修改 Vue CLI 提供的默认配置。也就是说，你应该在 vue.config.js 文件中配置你需要修改的 webpack 相关配置选项，而不是直接使用 webpack.config.js 文件来覆盖 Vue CLI 的默认配置。

如果一定要自己配置webpack也行，但是需要注意，使用这种方式需要你自己负责维护和更新 webpack 配置，且可能导致 Vue CLI 中的某些特性无法正常工作

vue.config.js中如何配置css、图片打包等loader

在 vue.config.js 中，可以通过 configureWebpack 或 chainWebpack 选项来配置 webpack 相关的配置选项。

• configureWebpack 是一个接收一个对象或一个函数作为参数的方法，用于修改或替换默认的 webpack 配置；

• chainWebpack 则是一个接收一个函数作为参数的方法，用于在默认的 webpack 配置上进行额外的修改

module.exports = {
  chainWebpack: config => {
    // 添加 CSS 预处理器
    config.module.rule('scss')
      .test(/\.scss$/) //针对 /\.scss$/ 后缀的文件进行处理
      .use('sass-loader')
      .loader('sass-loader')
      .end();
 
    // 添加 file-loader，用于处理图片等资源文件
    config.module.rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'img/[name].[hash:8].[ext]'
      })
      .end();
  }
};

---

package.json

package.json可以称为前端项目管家，作为一个描述文件，描述了你的项目所依赖的包跟项目的一些信息(比如项目名称，项目版本等)。

通过npm init 或则 npm init -y【生成默认值, 跳过回答问题步骤】安装

实例

• name：项目/模块名称，长度必须小于等于214个字符

• version：项目版本

• description：项目描述，是一个字符串

• main：项目默认执行文件，比如 require(‘webpack’)；就会默认加载 lib 目录下的 webpack.js 文件，如果没有设置，则默认加载项目跟目录下的 index.js 文件

• scripts：执行 npm 脚本命令简写，比如 “start”: “react-scripts start”, 执行 npm start 就是运行 “react-scripts start”

• keywords：项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包

• author：项目开发者

• license：软件授权条款，让用户知道他们的使用权利和限制

常见的还有：

• dependencies：生产环境下，项目运行所需依赖。

• devDependencies：开发环境下，项目所需依赖

• eslintConfig：EsLint 检查文件配置

• browserslist：供浏览器使用的版本列表

• private：是否私有，设置为 true 时，npm 拒绝发布

• repository：项目仓库地址

package-lock.json

package.json里面的包版本不是一个具体的版本，而是一个最优版本。而package-lock.json里面定义的是某个包的具体版本，以及包之间的层叠关系

• Version: 依赖包的版本号

• Resolved: 依赖包的安装源(其实就是可以理解为下载地址)

• Intergrity: 表明完整性的 Hash 值

• Dev: 表示该模块是否为顶级模块的开发依赖或者是一个的传递依赖关系

• requires: 依赖包所需要的所有依赖项,对应依赖包 package.json 里 dependencices 中的依赖项

执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新

jsconfig.json

jsconfig.json文件指定编译项目所需的根文件和编译器选项；jsconfig.json的配置可以对你的文件所在目录下的所有js代码做出个性化支持。

TypeScript 项目可以使用tsconfig.json文件来代替，它的作用几乎相同

{
    "compilerOptions": {
        "target": "es2015",  // 指定要使用的默认库，值为"es3","es5","es2015"...
        "module": "commonjs", // 在生成模块代码时指定模块系统,
        "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
        "checkJs": false, // 启用javascript文件的类型检查
        "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
        "paths": {
            "@/*": ["src/*"],// 指定相对于baseUrl选项计算的路径映射
            "components/*": ["src/components/*"]
        }
    },
    "exclude": [ // 要排除的文件
        "node_modules", 
        "dist"
    ]
}

paths很常用，举个事例：

import my from '../../../components/My/my.vue'
 
import my from '@/components/My/my.vue'

.babelrc与babel.config.js

Babel是一个JS编译器，相当于一个中介，一边是用户，另一边是浏览器。这几年，JavaScript 发生了很大的变化，许多新特性在很多浏览器里都不支持。Babel 的主要作用就是规避这些问题，可以确保 JavaScript 代码兼容所有的浏览器

比较总结：

babelrc 的加载规则是按目录加载的，是只针对自己的代码。config的配置针对了第三方的组件和自己的代码内容。babel.config.js 是一个项目级别的配置，一般有了babel.config.js 就不会在去执行.babelrc的设置

.eslintrc.js【规范代码风格】

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
        { 
          // files: [] 是用于匹配文件的，*号代表所有文件。index.vue也可以改成 *.vue，
          // 这就是匹配目录下的所有vue文件
          files: ['src/views/index.vue'],   
          rules: {
          //给上面匹配的文件指定规则
          'vue/multi-word-component-names':"off",
          } 
        }
   ]
}
'
运行
运行

root：标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找

env：env关键字指定你想启用的环境

extends：规则继承

parserOptions：解析器配置项

rules：自定义规则

overrides：通过overrides对特定文件进行特定的eslint检测

其他配置信息，可看： vue中eslintrc.js配置最详细介绍_vue.js_脚本之家 (jb51.net)

rules配置信息，可看： List of available rules - ESLint中文文档 (bootcss.com)

.postcssrc.js

css编译器，解决不同浏览器对css兼容都不一样问题