vue-cli4中，有一步询问你将所有插件配置写入package.json文件还是单独生成各自的配置文件

蔚落 2023-06-09 07:58 2阅读 0赞

![在这里插入图片描述][20191019202204389.png]

# 建议选择第一项，单独生成各自的配置文件！！！ #

# 如果选择第一项 #

### 此时的目录结构 ###

![在这里插入图片描述][20191019203155226.png]

### 此时的package.json ###

{ 
      "name": "test3",
      "version": "0.1.0",
      "private": true,
      "scripts": { 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": { 
        "core-js": "^3.1.2",
        "vue": "^2.6.10",
        "vue-router": "^3.0.6",
        "vuex": "^3.0.1"
      },
      "devDependencies": { 
        "@vue/cli-plugin-babel": "^4.0.0",
        "@vue/cli-plugin-eslint": "^4.0.0",
        "@vue/cli-plugin-router": "^4.0.0",
        "@vue/cli-plugin-vuex": "^4.0.0",
        "@vue/cli-service": "^4.0.0",
        "@vue/eslint-config-prettier": "^5.0.0",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.16.0",
        "eslint-plugin-prettier": "^3.1.0",
        "eslint-plugin-vue": "^5.0.0",
        "less": "^3.0.4",
        "less-loader": "^5.0.0",
        "prettier": "^1.18.2",
        "vue-template-compiler": "^2.6.10"
      }
    }

### 此时的`.eslintrc.js` ###

module.exports = { 
      root: true,
      env: { 
        node: true
      },
      extends: ["plugin:vue/essential", "@vue/prettier"],
      rules: { 
        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
      },
      parserOptions: { 
        parser: "babel-eslint"
      }
    };

# 如果选择第二项 #

项目中只会有一个package.json文件，所有插件的配置项都在这里面写，比如**eslint配置文件**

### 此时的目录结构 ###

![在这里插入图片描述][20191019203131450.png]

### 此时的package.json内容如下 ###

{ 
      "name": "test",
      "version": "0.1.0",
      "private": true,
      "scripts": { 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": { 
        "core-js": "^3.1.2",
        "view-design": "^4.0.1",
        "vue": "^2.6.10",
        "vue-router": "^3.0.6",
        "vuex": "^3.0.1"
      },
      "devDependencies": { 
        "@vue/cli-plugin-babel": "^4.0.0",
        "@vue/cli-plugin-eslint": "^4.0.0",
        "@vue/cli-plugin-router": "^4.0.0",
        "@vue/cli-plugin-vuex": "^4.0.0",
        "@vue/cli-service": "^4.0.0",
        "@vue/eslint-config-prettier": "^5.0.0",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.16.0",
        "eslint-plugin-prettier": "^3.1.0",
        "eslint-plugin-vue": "^5.0.0",
        "less": "^3.0.4",
        "less-loader": "^5.0.0",
        "prettier": "^1.18.2",
        "vue-template-compiler": "^2.6.10"
      },
      "eslintConfig": { 
        "root": true,
        "env": { 
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "@vue/prettier"
        ],
        "rules": { 
          "vue/no-parsing-error": [2, {  "x-invalid-end-tag": false }]
        },
        "parserOptions": { 
          "parser": "babel-eslint"
        }
      },
      "postcss": { 
        "plugins": { 
          "autoprefixer": { }
        }
      },
      "browserslist": [
        "> 1%",
        "last 2 versions"
      ]
    }

[20191019202204389.png]: /images/20230531/cc26ca2c6fef48d8bd93a19a1be68694.png
[20191019203155226.png]: /images/20230531/477c8940082041ff801325e6e07f4f26.png
[20191019203131450.png]: /images/20230531/4a7f97efe39b4aba9a64dd527c891038.png