项目配置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值。

// 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

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

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

     在Vue.config.js里读取环境变量：

module.exports = {
    ...
    devServer: {
        https: process.env.NODE_ENV !== 'dev',
    },
}

      项目中读取环境变量：

  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加载。

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。

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

 pages

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

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 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 以加速生产环境构建。

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

 devServer

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

  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 警告将会导致编译失败。

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

configureWebpack

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

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配置。

chainWebpack: config =>
    config
      /** @description 使用CDN访问以下依赖 */
      .externals({
        'vue': 'Vue',
        'ant-design-vue': 'antd',
        'moment': 'moment',
        'lodash': '_',
        'echarts': 'echarts',
      })
      /** @description 压缩vue文件