返回文章

vue-cli3 的配置文件详细介绍

如何启动 操作步骤 一开始只有两个选项: default(默认配置)、Manually select features(手动配置)和自定义模板，根据自己情况选择 根据你的项目需要来选择配置,空格键是选中与取消，A 键是全选 选择 css 预处理器 如果你选择了 Css 预处理器选项，会让你选择这个 是否使用路由的 history 模式：一般选择 no 选择 Eslint 代码验证规则：不勾这个->…

如何启动

vue create vueItem

操作步骤

  1. 一开始只有两个选项: default(默认配置)、Manually select features(手动配置)和自定义模板，根据自己情况选择
  2. 根据你的项目需要来选择配置,空格键是选中与取消，A 键是全选
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
  // 检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择）
  >( ) TypeScript                                 // 支持使用 TypeScript 书写源码
   ( ) Progressive Web App (PWA) Support          // PWA 支持
   ( ) Router                                     // 支持 vue-router
   ( ) Vuex                                       // 支持 vuex
   ( ) CSS Pre-processors                         // 支持 CSS 预处理器。
   ( ) Linter / Formatter                         // 支持代码风格检查和格式化。
   ( ) Unit Testing                               // 支持单元测试。
   ( ) E2E Testing
  1. 选择 css 预处理器 如果你选择了 Css 预处理器选项，会让你选择这个
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  // 选择CSS预处理器（默认支持PostCSS，Autoprefixer和CSS模块）：
  > SCSS/SASS
    LESS
    Stylus
  1. 是否使用路由的 history 模式：一般选择 no
Use history mode for router? (Requires proper server setup for index fallback in production)
  1. 选择 Eslint 代码验证规则：不勾这个->Linter / Formatter // 支持代码风格检查和格式化。就不会有这行
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  1. 选择什么时候进行代码规则检测：不勾这个->Linter / Formatter // 支持代码风格检查和格式化。就不会有这行
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
  >( ) Lint on save // 保存就检测
   ( ) Lint and fix on commit // fix和commit时候检查
  1. 选择 e2e 测试:不勾这个->E2E Testing 就不会有这行
? Pick a E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only)
  Nightwatch (Selenium-based)
  1. 把 babel,postcss,eslint 这些配置文件放哪：选择独立放置，
  ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
  > In dedicated config files // 独立文件放置
    In package.json // 放package.json里
  1. 是否保存配置：方便下次选择
Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置
// 选保存之后，会让你写一个配置的名字：
Save preset as:  name // 然后你下次进入配置可以直接使用你这次的配置了

如何启动

npm run serve
npm run build

生成目录

|-- dist                       # 打包后文件夹
|-- public                     # 静态文件夹
|   |-- favicon.ico               # 网页图标
|   |-- index.html                # 入口页面
|-- src                        # 源码目录
|   |--assets                     # 模块资源
|   |--components                 # vue公共组件
|   |--views                      # 路由/业务
|   |--App.vue                    # 页面入口文件
|   |--main.js                    # 入口文件，加载公共组件
|   |--router.js                  # 路由配置
|   |--store.js                   # 状态管理
|-- .env.pre-release           # 预发布环境
|-- .env.production            # 生产环境
|-- .env.test                  # 测试环境
|-- vue.config.js              # 配置文件
|-- .eslintrc.js               # ES-lint校验
|-- .gitignore                 # git忽略上传的文件格式
|-- babel.config.js            # babel语法编译
|-- package.json               # 项目基本信息
|-- postcss.config.js          # CSS预处理器(此处默认启用autoprefixer)
|-- .browserslistrc            # 浏览器兼容

一些配置文件

  1. vue.config.js
const path = require('path');
const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 （另：https://github.com/liriliri/eruda）
const CompressionPlugin = require('compression-webpack-plugin'); //Gzip
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器
const baseUrl = process.env.NODE_ENV === 'production' ? '/static/' : '/'; //font scss资源路径 不同环境切换控制
module.exports = {
  //基本路径
  baseUrl: './',
  //输出文件目录
  outputDir: 'dist',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'static',
  // 指定生成的 index.html 的输出路径 (相对于 outputDir),也可以是一个绝对路径
  indexPath: 'index.html',
  // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  filenameHashing: true,
  // 多页的一些配置---》开始
  //以多页模式构建应用程序。
  // pages: undefined,
  pages: {
    index: {
      // page 的入口
      entry: 'src/pages/index/index.js',
      // 模板来源
      template: 'src/pages/index/index.html',
      // 在 dist 的输出为 index.html
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '首页',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    // 多入口时，接着写子页面
    //subpage: 'src/subpage/main.js'
  },
  // 多页的一些配置---》结束
  //是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,
  //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建，在适当的时候开启几个子进程去并发的执行压缩
  parallel: require('os').cpus().length > 1,
  //生产环境是否生成 sourceMap 文件，一般情况不建议打开
  productionSourceMap: false,
  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules，
  // 想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  transpileDependencies: [],
  // 构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性, 默认false
  integrity: false,
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // 代理
  devServer: {
    port: 8080, // 端口号
    host: '127.0.0.1',
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    proxy: {
      '/api': {
        target: '127.0.0.1:900',
        ws: true,
        changeOrigin: true
      }
    }
  },
  //对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: (config) => {
   //   图片下的 url-loader 值，将其 limit 限制改为 5M
    config.module.rule("images")
        .use("url-loader")
        .tap(options =>
        merge(options, {
        limit: 5120
  },
  //调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
  configureWebpack: (config) => {
    //生产and测试环境
    let pluginsPro = [
      new CompressionPlugin({
        //文件开启Gzip，也可以通过服务端(如：nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
        threshold: 8192,
        minRatio: 0.8
      }),
      //	Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
      new BundleAnalyzerPlugin()
    ];
    //开发环境
    let pluginsDev = [
      //移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin  https://github.com/Tencent/vConsole)
      new vConsolePlugin({
        filter: [], // 需要过滤的入口文件
        enable: true // 发布代码前记得改回 false
      })
    ];
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
      config.plugins = [...config.plugins, ...pluginsPro];
    } else {
      // 为开发环境修改配置...
      config.plugins = [...config.plugins, ...pluginsDev];
    }
  },
  css: {
    // 启用 CSS modules
    modules: false,
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps，一般不建议开启
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },

      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    }
  },
  // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
  pluginOptions: {
    'style-resources-loader': {
      //https://github.com/yenshih/style-resources-loader
      preProcessor: 'scss', //声明类型
      patterns: [
        //path.resolve(__dirname, './src/assets/scss/_common.scss'),
      ]
      //injector: 'append'
    }
  }
};
  1. babel.config.js
//babel.config.js
module.exports = {
  presets: [
    [
      "@vue/app",
      {
        polyfills: ["es6.promise", "es6.symbol"]
      }
    ]
  ]
};
  1. .browserslistrc
//.browserslistrc
> 1%
last 2 versions
not ie <= 8
  1. postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    //'postcss-px2rem': {
    //  remUnit: 75,
    //},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules|assets|login|main/gi
    }
  }
};
  1. 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"
  }
};

使用 vue-cli 常见问题

如何删除 preset

cd ~
vim .vuec

// 删除presets下的模版
{
  "packageManager": "yarn",
  "useTaobaoRegistry": true,
  "presets": {
    "vueDemo": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {}
      },
      "router": true,
      "routerHistoryMode": false,
      "vuex": true,
      "cssPreprocessor": "less"
    },
    "vue-with-ts": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": true,
          "tsLint": true,
          "lintOn": [
            "save"
          ],
          "useTsWithBabel": true
        }
      },
      "router": true,
      "routerHistoryMode": false,
      "vuex": true,
      "cssPreprocessor": "less"
    }
  }
}

如何在 vue-create 的时候不生成.git 文件夹

哪位大神会，教教我~

暂无评论