项目配置vue.config jsconfig babel.config .prettierc .env .eslintrc

.env

在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说服务器地址、接口地址、websorket地址...... 等等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。

在根目录添加.env文件，配置所有情况下都会用到的配置
.env.production对应生产环境
.env.development对应开发环境
.env.[model] 用户创建的环境

npm run dev(serve) ：其实是运行了 vue-cli service serve ，默认模式为 development （读取.env.development）。可以在 .env.development 文件下修改该模式的 NODE_ENV 。

npm run build ，其实运行了 vue-cli service build ，默认模式为 production （读取.env.production）。可以在 .env.production 文件下修改该模式的 NODE_ENV

由于vue-cli只给我们默认配置了pro和dev两个环境，如果我们需要建立新环境，需要自己定义model值。

javascript 复制代码

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",//默认就是 development开发环境
    "build": "vue-cli-service build",//默认就是 production生产环境
    "serve:beta": "vue-cli-service serve --mode beta",
    ...
  },

beta为我们自建的环境，同时我们需要建立配置文件.env.beta

javascript 复制代码

//.env.beta文件
NODE_ENV = 'beta';
VUE_APP_NODE_ENV = 'beta'
VUE_APP_HOST=beta.sandieyun.com

环境变量定义必须以"VUE_APP_"作为前缀。

在Vue.config.js里读取环境变量：
javascript 复制代码
module.exports = {
    ...
    devServer: {
        https: process.env.NODE_ENV !== 'dev',
    },
}
项目中读取环境变量：
javascript 复制代码
  get linkUrl() {
    return `https://app.${process.env.VUE_APP_HOST}/link/xxxx`;
  }

除了环境变量，还能定义两个特殊变量：

NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

vue.config.js

vue.config.js 是一个可选的配置文件，如果在项目根目录上存在这个文件，则会被@vue/cli-service加载。

javascript 复制代码

module.exports = {
    xxx:xxxx,
    ...
}

publicPath

publicPath 选项用于指定项目的公共路径，即项目部署时的基本 URL。

默认为"/"。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/

如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/

publicPath可以被设置为''或者'./'。这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

outputDir

当运行 vue-cli-service build 时生成的生产环境构建文件的目录，也就是打包后的文件目录。

assetsDir

放置生成的静态资源 (js、css、img、fonts) 的目录。总目录名字叫：static，里面包含子目录，css,img,js三个文件夹。

indexPath

指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径，也可以将打包的index.html文件文字改成school,html。

javascript 复制代码

module.exports = {
    outputDir: 'dist',
    assetsDir: 'static',
    indexPath: 'index.html'
}

pages

其值应该是一个对象，对象的 key 是入口的名字，value 是：\

javascript 复制代码

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

productionSourceMap

如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。

javascript 复制代码

module.exports = {  
productionSourceMap: false, //因为内存占用问题，暂时关闭sourceMap
}

devServer

所有 webpack-dev-server 的选项都支持

javascript 复制代码

  devServer: {
    // 非DEV环境则开启https协议
    https: process.env.NODE_ENV !== 'dev',
    // 禁用host的检查，使得webpack-dev-server可以接受来自任何网络环境下的请求
    disableHostCheck: true,
  },

新版的vue-cli已经将disableHostCheck改成

 allowedHosts: 'all',

lintOnSave

取值：true | false | 'warning' | 'default' | 'error'

用于指定是否在保存文件时执行代码检查

设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'default'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。
设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误，这意味着 lint 警告将会导致编译失败。

javascript 复制代码

module.exports = {
    // 在保存文件时不会运行 lint 检查，禁用 linting 功能。
    lintOnSave: false,
}

configureWebpack

如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

javascript 复制代码

const {
  optimize: { LimitChunkCountPlugin },
} = require('webpack');

module.exports = {
 configureWebpack: {
    plugins: [
      new LimitChunkCountPlugin({
        maxChunks: 10,
      }),
    ],
  },
}

我们知道在webpack打包后会产生大量的chunk.xxxx的文件，如果chunk文件过多，会增加http请求的开销。所以我们加了webpack插件里的LimitChunkCountPlugin限制最大chunk文件数

chainWebpack

是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。说白了就是给你配置更精细的webpack配置。

javascript 复制代码

chainWebpack: config =>
    config
      /** @description 使用CDN访问以下依赖 */
      .externals({
        'vue': 'Vue',
        'ant-design-vue': 'antd',
        'moment': 'moment',
        'lodash': '_',
        'echarts': 'echarts',
      })
      /** @description 压缩vue文件<template>中的换行 */
      .module.rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => ({
        ...options,
        whitespace: 'condense',
      }))
      .end()
      .end()
      /** @description 支持import excel文件 */
      .rule('file')
      .test(/\.(xls|xlsx|doc|docx)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .end(),

这里其实是三部分配置：

我们先看这个：这部分其实只是修改 Loader 选项，在默认的loader options中新加了一条whitespace

这个是新增了一个file loader，当file name符合test里的正则表达式时，引用url-loader处理它

这个最难理解。我们先搞清楚什么是 externals

官方的八股文是这么写的：

就是webpack可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

其实就是把依赖插件抽离出来，通过CDN引入，而不占包体积。但是我们的项目文件又依赖这些插件生成的全局属性，比如window.Vue,window.echarts，window._。我们把依赖插件抽出来，那项目文件在打包的时候就会发生编译错误。所以我们又要把这些插件生成的全局变量名告诉webpack。

具体可以看这篇文章，讲得很明白！Webpack--externals(外部扩展)详解_webpack externals-CSDN博客externals用法详解_webpack externalshttps://blog.csdn.net/weixin_39964419/article/details/127263941?utm_source=miniapp_weixin

jsconfig.json

是vscode生成的。表示该目录是JavaScript项目的根目录。jsconfig.json文件指定根文件和JavaScript语言服务提供的功能选项。

javascript 复制代码

{
  // 项目包含的文件
  "include": ["src/**/*"],
  // 项目排除的文件 搜索不会搜到这里面
  "exclude": ["node_modules"],
    
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "strict": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "experimentalDecorators": true
  }
}

ESNext:泛指,它永远指向下一个版本。这个paths可以这么用：

javascript 复制代码

import { crossStorageModule } from '@/enum/store';

babel.config

JavaScript 编译器配置，它可以把需要转译的代码转译成低版本兼容的代码

javascript 复制代码

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
};

@vue/cli-plugin-babel/preset是一种预设

他构建在'@babel/preset-env'的基础上，并添加了一些针对Vue.js项目的优化。这个预设不仅确保你可以使用最新的javascript特性，还会根据Vue.js的需求对Babel进行配置

.prettierrc

依赖于vscode的Prettier - Code formatter扩展

配置好后我们可以通过右键进行格式化

javascript 复制代码

{
  // 缩进字节数
  "tabWidth": 2,
  // 缩进不使用tab，使用空格
  "useTabs": false,
  // 句尾添加分号
  "semi": true,
   // 使用单引号代替双引号
  "singleQuote": true,
  // props 是否用 引号 包裹
  "quoteProps": "consistent",
  // 单引号
  "jsxSingleQuote": false,
  // 行尾逗号
  "trailingComma": "all",
  // 花括号内填充空格 { a: 23 }
  "bracketSpacing": true,
  // 标签内有文字,尾标签>会单独成一行
  "bracketSameLine": false,
  // 箭头函数一个参数是否使用括号包裹参数
  "arrowParens": "avoid",
  // just for vue
  "vueIndentScriptAndStyle": false,
  // 换行标识
  "endOfLine": "auto"
}

.eslintrc.js

bash 复制代码

# 安装eslint
npm install eslint --save-dev

大多数IDE都自带eslint插件，在编写代码的时候会按照eslint的规则进行代码提示。

javascript 复制代码

module.exports = {
  // 是否在父级目录寻找配置文件
  root: true,
  // 用于启用特定环境的全局变量
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  //用于设置解析器
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@babel/eslint-parser',
    ecmaFeatures: { legacyDecorators: true },
  },
  // 配置规则
  //"off" 或 0 - 关闭规则
  //"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  // "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
  rules: {
    'arrow-body-style': ['error', 'as-needed'],
    'camelcase': 'error',
    'eqeqeq': ['error', 'smart'],
    'semi': ['error', 'always'],
    'no-var': 'error',
    'no-duplicate-imports': 'error',
    'no-template-curly-in-string': 'error',
    'consistent-this': ['error', '不允许将this重命名'],
    'dot-notation': 'error',
    'no-eval': 'error',
    'no-implied-eval': 'error',
    'no-multi-str': 'error',
    'no-return-await': 'error',
    'no-unneeded-ternary': 'error',
    'no-unused-vars': ['error', { ignoreRestSiblings: true }],
    'object-shorthand': 'error',
    'prefer-arrow-callback': 'error',
    'prefer-const': ['error', { destructuring: 'all' }],
    'prefer-rest-params': 'error',
    'require-await': 'error',
    'no-restricted-syntax': [
      'error',
      {
        selector: 'ForInStatement',
        message: '用Object.keys().forEach()代替for in循环',
      },
      {
        selector: 'ForStatement',
        message: '如果没有性能原因，用forEach、map代替for循环',
      },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'vue/multi-word-component-names': 'off',
  },
};

每次commit代码执行eslint检查

下载依赖

bash 复制代码

npm i -s -d lint-staged husky

在package.json配置

javascript 复制代码

{
  "name": "triascloud-app-pc",
  "version": "0.1.0",
  "scripts": {
    "dev": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vue-cli-service serve",
  },
  "dependencies": {
      ...
  },
  "devDependencies": {
   ...
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    // 对js和vue文件进行检查
    "*.{js,vue}": [
      "cross-env NODE_ENV=production vue-cli-service lint",
      "git add"
    ]
  }
}