20230623----重返学习-vue-cli脚手架

最新推荐文章于 2024-02-02 11:18:05 发布
最新推荐文章于 2024-02-02 11:18:05 发布
阅读量713 收藏
点赞数 1
分类专栏： webpack vue 重返学习 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/131355813
版权
重返学习 同时被 3 个专栏收录
126 篇文章 4 订阅
订阅专栏
vue
37 篇文章 0 订阅
订阅专栏
webpack
5 篇文章 0 订阅
订阅专栏

day-097-ninety-seven-20230623-vue-cli脚手架

vue-cli脚手架

  • Vue工程化处理工具之 : @vue/cli
    1. 脚手架的本质：基于webpack实现项目的打包部署;
    2. vue/cli

  1. 安装和使用

    // 全局安装
$ npm install -g @vue/cli

// 查看版本
$ vue –version

// 创建项目
$ vue create xxx

  2. 可选择当前配置项

    • 文件地址在：C:\Users\当前电脑用户名.vuerc。
      • 如：C:\Users\fangc.vuerc

  3. 文件目录

  4. package.json

    • 目录：
      • scripts：npm可执行命令
        • serve命令：
          • vue-cli-service 是Vue脚手架内部封装的一个模块，其可以按照内部配置好的webpack规则，对整个项目进行编译打包。
          • “vue-cli-service serve”
            • 开发环境，设置NODE——ENV=development
              • 按照webpack规则进行编译
              • 在本地基于webpack-dev-server启动web服务器，实时预览编译的内容。
                • 冷启动+热更新
        • build命令
          • “vue-cli-service build”
            • 生产环境：NODE_ENV=production
              • 按照webpack规则进行编译
              • 对项目进行打包，把打包后的内容输出到dist或build目录下，然后部署到服务器。
      • “dependencies” 开发环境的依赖。开发和生产环境需要的。
        • “axios” 和服务器进行数据通信。
        • “blueimp-md5” 实现MD5非对称加密。对称：加密内容是否可逆。
        • “core-js” 自带于vue的，和@babel/polyfill类似，都是用来处理js的兼容的。
        • “dayjs” 处理日期，对日期进行格式化操作的插件。可以安装更庞大的moment.js。如果安装了antdV5，则自带day.js；如果安装的是5以下的版本，则自带moment.js；但是这都是React框架中的。antd of vue组件库，是antd为vue框架开发的V1.xxx针对的是vue2，V2/V3.xxx针对的是vue3。
        • “echarts” 处理统计图。
        • “element-ui” vue2中，PC端最常用的UI组件库，占据50%以上。
        • “fastclick” 解决移动端click事件300ms延迟的。
        • “lib-flexible” 处理rem响应式布局的。
        • “lodash” 常用的方法库。我们的utils是对lodash的补充。
        • “regenerator-runtime” 处理async-await的兼容的。
        • “vant” 移动端的UI组件库，Vant是有赞开发的。cubeUI是滴滴开发的，也可以试试。
        • “vue” vue本身。
        • “vue-router” vue官方路由插件。
        • “vuex” vue全局数据存储。
        • “vuex-persist” vuex的持久化存储插件。原理是localStorage。
      • “devDependencies” 只有开发环境需要的插件。
        • “@babel/core”: “^7.12.16”,
        • “@babel/eslint-parser”: “^7.12.16”,
        • “@vue/cli-plugin-babel”: “~5.0.0”,
        • “@vue/cli-plugin-eslint”: “~5.0.0”,
        • “@vue/cli-plugin-router”: “~5.0.0”,
        • “@vue/cli-plugin-vuex”: “~5.0.0”,
        • “@vue/cli-service”: “~5.0.0”,
        • “babel-plugin-component” 是对"babel-plugin-import"插件的重写，主要用于element-ui。
        • “babel-plugin-import” 实现UI组件库按需导入的。
        • “cross-env” 手动设置环境变量。
        • “eslint” 词法检测插件本体。
        • “eslint-plugin-vue” 用于vue的词法检测插件。
        • “less” less预编译语言本体。
        • “less-loader” less预编译语言用到的模块和加载器。less-loader的版本不宜过高。
        • “postcss-pxtorem” 用于rem响应式布局。
        • “vue-template-compiler” 把vue中的template语法编译为虚拟DOM。
      • “eslintConfig” ESLint检测时候的规则。
      • “browserslist” 处理浏览器兼容的。

  5. jsconfig.json文件：不仅给webpack看，而且对vscode编辑器也有用！

    • 目录：
      • “paths” vscode会识别这些配置，当我们在vscode中，导入资源时，如输入@，自动会提示从src目录开发找。不过要配合webpack的resolve的alias别名中也配置了@代表的是src目录。

  6. babel.config.js 这个是babel的配置文件，用于处理js与vue语法的！

  7. vue.config.js 这个是vue的配置项。

    • @vue/cli 脚手架，为了美化项目的目录结构，把配置好的webpack规则都隐藏到了 node_modules 中，基于 vue-cli-service 进行管理！

      • 如果想查看配置好的规则？

        vue inspect > xxx.json

        • 比如执行：

          vue inspect > defaultWebpack.json//示例。
          • 之后就会暴露出webpack的配置文件到/defaultWebpack.json中：

            • Vue2进阶/day0623/defaultWebpack.json

              {
  mode: 'development',
  context: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623',
  output: {
    hashFunction: 'xxhash64',
    path: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/dist',
    filename: 'js/[name].js',
    publicPath: '/',
    chunkFilename: 'js/[name].js'
  },
  resolve: {
    alias: {
      '@': '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/src',
      vue$: 'vue/dist/vue.runtime.esm.js'
    },
    extensions: [
      '.mjs',
      '.js',
      '.jsx',
      '.vue',
      '.json',
      '.wasm'
    ],
    modules: [
      'node_modules',
      '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules',
      '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/@vue/cli-service/node_modules'
    ]
  },
  resolveLoader: {
    modules: [
      '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/@vue/cli-plugin-babel/node_modules',
      '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat',
      'node_modules',
      '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules',
      '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/@vue/cli-service/node_modules'
    ]
  },
  module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
    rules: [
      /* config.module.rule('esm') */
      {
        test: /\.m?jsx?$/,
        resolve: {
          fullySpecified: false
        }
      },
      /* config.module.rule('vue') */
      {
        test: /\.vue$/,
        use: [
          /* config.module.rule('vue').use('vue-loader') */
          {
            loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/@vue/vue-loader-v15/lib/index.js',
            options: {
              compilerOptions: {
                whitespace: 'condense'
              }
            }
          }
        ]
      },
      /* config.module.rule('vue-style') */
      {
        test: /\.vue$/,
        resourceQuery: /type=style/,
        sideEffects: true
      },
      /* config.module.rule('pug') */
      {
        test: /\.pug$/,
        oneOf: [
          /* config.module.rule('pug').oneOf('pug-vue') */
          {
            resourceQuery: /vue/,
            use: [
              /* config.module.rule('pug').oneOf('pug-vue').use('pug-plain-loader') */
              {
                loader: 'pug-plain-loader'
              }
            ]
          },
          /* config.module.rule('pug').oneOf('pug-template') */
          {
            use: [
              /* config.module.rule('pug').oneOf('pug-template').use('raw') */
              {
                loader: 'raw-loader'
              },
              /* config.module.rule('pug').oneOf('pug-template').use('pug-plain-loader') */
              {
                loader: 'pug-plain-loader'
              }
            ]
          }
        ]
      },
      /* config.module.rule('svg') */
      {
        test: /\.(svg)(\?.*)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name].[hash:8][ext]'
        }
      },
      /* config.module.rule('images') */
      {
        test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
        type: 'asset',
        generator: {
          filename: 'img/[name].[hash:8][ext]'
        }
      },
      /* config.module.rule('media') */
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        type: 'asset',
        generator: {
          filename: 'media/[name].[hash:8][ext]'
        }
      },
      /* config.module.rule('fonts') */
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
        type: 'asset',
        generator: {
          filename: 'fonts/[name].[hash:8][ext]'
        }
      },
      /* config.module.rule('css') */
      {
        test: /\.css$/,
        oneOf: [
          /* config.module.rule('css').oneOf('vue-modules') */
          {
            resourceQuery: /module/,
            use: [
              /* config.module.rule('css').oneOf('vue-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('css').oneOf('vue-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2,
                  modules: {
                    localIdentName: '[name]_[local]_[hash:base64:5]',
                    auto: () => true
                  }
                }
              },
              /* config.module.rule('css').oneOf('vue-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              }
            ]
          },
          /* config.module.rule('css').oneOf('vue') */
          {
            resourceQuery: /\?vue/,
            use: [
              /* config.module.rule('css').oneOf('vue').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('css').oneOf('vue').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('css').oneOf('vue').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              }
            ]
          },
          /* config.module.rule('css').oneOf('normal-modules') */
          {
            test: /\.module\.\w+$/,
            use: [
              /* config.module.rule('css').oneOf('normal-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('css').oneOf('normal-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('css').oneOf('normal-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              }
            ]
          },
          /* config.module.rule('css').oneOf('normal') */
          {
            use: [
              /* config.module.rule('css').oneOf('normal').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('css').oneOf('normal').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('css').oneOf('normal').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      /* config.module.rule('postcss') */
      {
        test: /\.p(ost)?css$/,
        oneOf: [
          /* config.module.rule('postcss').oneOf('vue-modules') */
          {
            resourceQuery: /module/,
            use: [
              /* config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('postcss').oneOf('vue-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2,
                  modules: {
                    localIdentName: '[name]_[local]_[hash:base64:5]',
                    auto: () => true
                  }
                }
              },
              /* config.module.rule('postcss').oneOf('vue-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              }
            ]
          },
          /* config.module.rule('postcss').oneOf('vue') */
          {
            resourceQuery: /\?vue/,
            use: [
              /* config.module.rule('postcss').oneOf('vue').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('postcss').oneOf('vue').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('postcss').oneOf('vue').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              }
            ]
          },
          /* config.module.rule('postcss').oneOf('normal-modules') */
          {
            test: /\.module\.\w+$/,
            use: [
              /* config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('postcss').oneOf('normal-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('postcss').oneOf('normal-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              }
            ]
          },
          /* config.module.rule('postcss').oneOf('normal') */
          {
            use: [
              /* config.module.rule('postcss').oneOf('normal').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('postcss').oneOf('normal').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('postcss').oneOf('normal').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      /* config.module.rule('scss') */
      {
        test: /\.scss$/,
        oneOf: [
          /* config.module.rule('scss').oneOf('vue-modules') */
          {
            resourceQuery: /module/,
            use: [
              /* config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('scss').oneOf('vue-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2,
                  modules: {
                    localIdentName: '[name]_[local]_[hash:base64:5]',
                    auto: () => true
                  }
                }
              },
              /* config.module.rule('scss').oneOf('vue-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('scss').oneOf('vue-modules').use('sass-loader') */
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('scss').oneOf('vue') */
          {
            resourceQuery: /\?vue/,
            use: [
              /* config.module.rule('scss').oneOf('vue').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('scss').oneOf('vue').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('scss').oneOf('vue').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('scss').oneOf('vue').use('sass-loader') */
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('scss').oneOf('normal-modules') */
          {
            test: /\.module\.\w+$/,
            use: [
              /* config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('scss').oneOf('normal-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('scss').oneOf('normal-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('scss').oneOf('normal-modules').use('sass-loader') */
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('scss').oneOf('normal') */
          {
            use: [
              /* config.module.rule('scss').oneOf('normal').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('scss').oneOf('normal').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('scss').oneOf('normal').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('scss').oneOf('normal').use('sass-loader') */
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          }
        ]
      },
      /* config.module.rule('sass') */
      {
        test: /\.sass$/,
        oneOf: [
          /* config.module.rule('sass').oneOf('vue-modules') */
          {
            resourceQuery: /module/,
            use: [
              /* config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('sass').oneOf('vue-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2,
                  modules: {
                    localIdentName: '[name]_[local]_[hash:base64:5]',
                    auto: () => true
                  }
                }
              },
              /* config.module.rule('sass').oneOf('vue-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('sass').oneOf('vue-modules').use('sass-loader') */
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: false,
                  sassOptions: {
                    indentedSyntax: true
                  }
                }
              }
            ]
          },
          /* config.module.rule('sass').oneOf('vue') */
          {
            resourceQuery: /\?vue/,
            use: [
              /* config.module.rule('sass').oneOf('vue').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('sass').oneOf('vue').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('sass').oneOf('vue').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('sass').oneOf('vue').use('sass-loader') */
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: false,
                  sassOptions: {
                    indentedSyntax: true
                  }
                }
              }
            ]
          },
          /* config.module.rule('sass').oneOf('normal-modules') */
          {
            test: /\.module\.\w+$/,
            use: [
              /* config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('sass').oneOf('normal-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('sass').oneOf('normal-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('sass').oneOf('normal-modules').use('sass-loader') */
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: false,
                  sassOptions: {
                    indentedSyntax: true
                  }
                }
              }
            ]
          },
          /* config.module.rule('sass').oneOf('normal') */
          {
            use: [
              /* config.module.rule('sass').oneOf('normal').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('sass').oneOf('normal').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('sass').oneOf('normal').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('sass').oneOf('normal').use('sass-loader') */
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: false,
                  sassOptions: {
                    indentedSyntax: true
                  }
                }
              }
            ]
          }
        ]
      },
      /* config.module.rule('less') */
      {
        test: /\.less$/,
        oneOf: [
          /* config.module.rule('less').oneOf('vue-modules') */
          {
            resourceQuery: /module/,
            use: [
              /* config.module.rule('less').oneOf('vue-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('less').oneOf('vue-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2,
                  modules: {
                    localIdentName: '[name]_[local]_[hash:base64:5]',
                    auto: () => true
                  }
                }
              },
              /* config.module.rule('less').oneOf('vue-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('less').oneOf('vue-modules').use('less-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/less-loader/dist/cjs.js',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('less').oneOf('vue') */
          {
            resourceQuery: /\?vue/,
            use: [
              /* config.module.rule('less').oneOf('vue').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('less').oneOf('vue').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('less').oneOf('vue').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('less').oneOf('vue').use('less-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/less-loader/dist/cjs.js',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('less').oneOf('normal-modules') */
          {
            test: /\.module\.\w+$/,
            use: [
              /* config.module.rule('less').oneOf('normal-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('less').oneOf('normal-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('less').oneOf('normal-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('less').oneOf('normal-modules').use('less-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/less-loader/dist/cjs.js',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('less').oneOf('normal') */
          {
            use: [
              /* config.module.rule('less').oneOf('normal').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('less').oneOf('normal').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('less').oneOf('normal').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('less').oneOf('normal').use('less-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/less-loader/dist/cjs.js',
                options: {
                  sourceMap: false
                }
              }
            ]
          }
        ]
      },
      /* config.module.rule('stylus') */
      {
        test: /\.styl(us)?$/,
        oneOf: [
          /* config.module.rule('stylus').oneOf('vue-modules') */
          {
            resourceQuery: /module/,
            use: [
              /* config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('stylus').oneOf('vue-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2,
                  modules: {
                    localIdentName: '[name]_[local]_[hash:base64:5]',
                    auto: () => true
                  }
                }
              },
              /* config.module.rule('stylus').oneOf('vue-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('stylus').oneOf('vue-modules').use('stylus-loader') */
              {
                loader: 'stylus-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('stylus').oneOf('vue') */
          {
            resourceQuery: /\?vue/,
            use: [
              /* config.module.rule('stylus').oneOf('vue').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('stylus').oneOf('vue').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('stylus').oneOf('vue').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('stylus').oneOf('vue').use('stylus-loader') */
              {
                loader: 'stylus-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('stylus').oneOf('normal-modules') */
          {
            test: /\.module\.\w+$/,
            use: [
              /* config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('stylus').oneOf('normal-modules').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('stylus').oneOf('normal-modules').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('stylus').oneOf('normal-modules').use('stylus-loader') */
              {
                loader: 'stylus-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          },
          /* config.module.rule('stylus').oneOf('normal') */
          {
            use: [
              /* config.module.rule('stylus').oneOf('normal').use('vue-style-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/vue-style-loader/index.js',
                options: {
                  sourceMap: false,
                  shadowMode: false
                }
              },
              /* config.module.rule('stylus').oneOf('normal').use('css-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/css-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  importLoaders: 2
                }
              },
              /* config.module.rule('stylus').oneOf('normal').use('postcss-loader') */
              {
                loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/postcss-loader/dist/cjs.js',
                options: {
                  sourceMap: false,
                  postcssOptions: {
                    plugins: [
                      function () { /* omitted long function */ }
                    ]
                  }
                }
              },
              /* config.module.rule('stylus').oneOf('normal').use('stylus-loader') */
              {
                loader: 'stylus-loader',
                options: {
                  sourceMap: false
                }
              }
            ]
          }
        ]
      },
      /* config.module.rule('js') */
      {
        test: /\.m?jsx?$/,
        exclude: [
          function () { /* omitted long function */ }
        ],
        use: [
          /* config.module.rule('js').use('babel-loader') */
          {
            loader: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/babel-loader/lib/index.js',
            options: {
              cacheCompression: false,
              cacheDirectory: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/.cache/babel-loader',
              cacheIdentifier: 'eb1e85dc'
            }
          }
        ]
      }
    ]
  },
  optimization: {
    realContentHash: false,
    splitChunks: {
      cacheGroups: {
        defaultVendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    },
    minimizer: [
      /* config.optimization.minimizer('terser') */
      new TerserPlugin(
        {
          terserOptions: {
            compress: {
              arrows: false,
              collapse_vars: false,
              comparisons: false,
              computed_props: false,
              hoist_funs: false,
              hoist_props: false,
              hoist_vars: false,
              inline: false,
              loops: false,
              negate_iife: false,
              properties: false,
              reduce_funcs: false,
              reduce_vars: false,
              switches: false,
              toplevel: false,
              typeofs: false,
              booleans: true,
              if_return: true,
              sequences: true,
              unused: true,
              conditionals: true,
              dead_code: true,
              evaluate: true
            },
            mangle: {
              safari10: true
            }
          },
          parallel: true,
          extractComments: false
        }
      )
    ]
  },
  plugins: [
    /* config.plugin('vue-loader') */
    new VueLoaderPlugin(),
    /* config.plugin('define') */
    new DefinePlugin(
      {
        'process.env': {
          NODE_ENV: '"development"',
          BASE_URL: '"/"'
        }
      }
    ),
    /* config.plugin('case-sensitive-paths') */
    new CaseSensitivePathsPlugin(),
    /* config.plugin('friendly-errors') */
    new FriendlyErrorsWebpackPlugin(
      {
        additionalTransformers: [
          function () { /* omitted long function */ }
        ],
        additionalFormatters: [
          function () { /* omitted long function */ }
        ]
      }
    ),
    /* config.plugin('html') */
    new HtmlWebpackPlugin(
      {
        title: 'vue2_knowledge',
        scriptLoading: 'defer',
        templateParameters: function () { /* omitted long function */ },
        template: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/public/index.html'
      }
    ),
    /* config.plugin('copy') */
    new CopyPlugin(
      {
        patterns: [
          {
            from: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/public',
            to: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/dist',
            toType: 'dir',
            noErrorOnMissing: true,
            globOptions: {
              ignore: [
                '**/.DS_Store',
                '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/public/index.html'
              ]
            },
            info: {
              minimized: true
            }
          }
        ]
      }
    ),
    /* config.plugin('eslint') */
    new ESLintWebpackPlugin(
      {
        extensions: [
          '.js',
          '.jsx',
          '.vue'
        ],
        cwd: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623',
        cache: true,
        cacheLocation: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/.cache/eslint/402b4236.json',
        context: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623',
        failOnWarning: false,
        failOnError: true,
        eslintPath: '/Users/zhouxiaotian/Documents/2023实体就业班/2023Vue系统课/Vue2进阶/day0623/node_modules/eslint',
        formatter: 'stylish'
      }
    )
  ],
  entry: {
    app: [
      './src/main.js'
    ]
  }
}

    • 可以修改配置好的规则。

  8. babel.config.js文件 对babel这个webpack插件的配置。

    1. babel是一个编译工具：
      • 把如高版本语法编译成低版本语法。如ES6语法转成ES5语法。
      • 或者将文件按照自定义规则转换成js语法。如把vue文件或jsx文件编译成js文件。
    2. webpack是一个打包工具。定义入口文件，将所有模块引入整理后，通过loader和plugin处理后，打包输出。
      • 把如主js文件及该j文件s中引用到的模块组合成一个大js文件。
      • 比如把html中用到的图片url转成base64格式。
      • 通过loader来识别不同的文件名，并转成js格式，之后再打包到一起。
    3. webpack 通过 babel-loader 使用 Babel 。

冷启动与热更新

  • 冷启动与热更新
    • 冷启动：目前电脑上没有这个服务器，我们是重新(第一次)启动；在这种模式下，一切的编译等工作，都要从头开始！
    • 热启动/热更新：之前启动的服务还在，保存在了系统内存中，并且对之前的编译操作建立了缓存，当代码更改后，只把更改的部分重新编译，在启动的服务中进行实时预览！

修改默认的配置项

  • 在真正的项目开发中，默认的配置项，可能无法完全满足我们的需求，此时我们需要对默认规则进行修改（新增/删除规则），我们如何处理？
    1. 绝对不能去 node_modules 中修改，协作难。

    • 思路一：提供一个特定文件，可以让我们按照规则进行修改「Vue这样处理的」

      • vue.config.js配置项
      • 特点：
        • 简单，对webpack的门槛要求低
        • 方便快捷
        • 但是缺乏一定的灵活性「需要按照人家的要求来」

    • 思路二：把配置项都暴露出来，源码给到开发者，让开发者随便改「React」

      • 特点：
        • 对webpack要求高
        • 上手难
        • 但是灵活

vue.config.js

  • vue.config.js

    • publicPath: 控制打包后，HTML中导入资源的前缀。默认是/根目录。

      • 打包后：<script defer="defer" src="/js/chunk-vendors.3cdca947.js"></script>。
      • 问题：要求打包后的资源必须部署到服务器指定webpack服务的根目录下。只有这样，后期在访问页面的时候，才可以从根目录下访问到这些资源！
      • 实战指南：
        • 平时开发中，我们一般会把publicPath改为./，即当前目录；这样只要把html和资源都部署到相同的目录下，不论是不是根目录，以后每次访问，都是从当前目录开始查找！
        • 我们还可能会把publicPath改为一个CDN地址，目的是开启资源的地域分布式部署。

    • outputDir: 当运行vue-cli-service build时生成的生产环境构建文件的目录。

    • assetsDir: 放置生成的静态资源 (js、css、img、fonts) 的 (相对于outputDir目录)目录。

    • filenameHashing: 是否启用文件名哈希。

    • pages:

      pages: {
  index: {
    entry: 'src/main.js',
    template: 'public/index.html',
    filename: 'index.html',
    chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  login:{
      entry: 'src/login.js',
      template: 'public/login.html',
      filename: 'login.html',
      chunks: ['chunk-vendors', 'chunk-common', 'login']
  }
}

    • lintOnSave: 控制ESLint检测。

      • 可选项：
        • false：不进行ESLint检测。
        • true/‘warning’：进行ESLint检测，但是如果有不符合语法规范的，只是提示警告，不影响代码的编译。
        • ‘default’/‘error’: 进行ESLint检测，但是如果有不符合语法规范的-即有语法错误，则直接停止代码的编译和预览。
      • 实战指南：

        • 开发环境下：使用true。

        • 生产环境下：使用false，最后打包的时候，就不要再检测了，直接打包即可，这样可以提高打包的速度！

          const env = process.env.NODE_ENV;
//console.log(`env-->`, env);

module.exports = defineConfig({
  lintOnSave: env !== "production",
});

    • runtimeCompiler

    • transpileDependencies: 控制是否对node_modules中的文件进行编译。

      • 可选项：
        • true：所有node_modules中的文件都需要编译。
        • false：和上面相反，即所有node_modules中的文件都不需要编译。
      • 实战指南
        • 真实项目中，用的是数组或者false，以此来加快项目编译的速度。

    • productionSourceMap：控制生产环境下，是否需要生成source map文件。

      • 开发环境下不需要：因为开发环境下，代码不会压缩和混淆，直接可以做调用。
      • 生产环境下，所有的代码都会压缩为一行，并且进行了混淆，这样没办法调用，想调用则需要source map文件！
      • 实战指南：
        • source map文件我们一般是不需要的，因为如果生产环境出现问题，第一件事不是调用，而是回滚！把损失降到最低！
          • 取消source-map文件，可以加快打包速度！

    • devServer: dev-server开发服务器；

      1. webpack-configuration dev-server开发服务器
      • devServer.host
      • devServer.open
      • devServer.proxy 配置跨域代理
        • 真实项目中，客户端可能需要向多个服务器发送请求，此时需要配置多套跨域代理。
          • 基于不同的请求前缀进行区分。
            • 一般用一级域名来做。
          • 如果请求的前缀在真正的请求地址中不存在，则需要把用来区分的前缀干掉。
            • 一般要干掉，防止冲突。

    • configureWebpack

    • chainWebpack

    • css

灰度测试

  • 产品上线后出现bug怎么处理？

    • 这个问题我还真没遇到过，因为我们开发完毕，程序员自己要测两三遍，测试还要测很多遍，而且真正上下前，我们会放在灰度环境中再测试一下！！确保没问题后，再部署到服务器上！所以，这几年还真没遇到过上线后，出现啥严重问题的情况「但是出现过一些改进问题：产品感觉这样操作不是很好，需要改一下用户体验，或者一些其他的操作，但是不是BUG，这样的我们会尽快加班把问题改过来，然后重新测试部署即可」！
    • 虽然没遇到过，但是如果真的遇到，我的想法是：
      • 看问题的严重性
        • 如果不严重，类似于一些体验性的问题，尽快更新新的版本即可
        • 但是如果是BUG，影响使用或者造成损失了，啥都别想，直接回滚到上一个版本，然后在灰度环境中测试，找到问题，解决问题，最后再重新部署！！

  • 大公司有一套完善的灰度服务器机制

    • 假设总共1万台服务器
      • 产品上线后，先上 1000 台，确保没问题后，再上5000台 。。。。直到都有发布！！

  • 环境：

    • 开发环境
    • 测试环境「数据都是假数据」
    • 灰度环境「和生产环境高度一致，数据要规范多了，或者就是真实数据」，之前也叫仿真环境。
    • 生产环境

  • 实际操作：

    1. 改脚本命令：

      NODE_ENV
development   $ yarn serve     "serve": "vue-cli-service serve"
production    $ yarn build     "serve": "vue-cli-service build"

      多加一些环境变量

      NODE_ENV
development     $ yarn serve     "serve": "vue-cli-service serve"
test            $ yarn test      "test": "cross-env NODE_ENV=test vue-cli-service build"
.....
production      $ yarn build     "serve": "vue-cli-service build"

    2. 我们后期根据不同的环境变量，处理不同的事情：

      • webpack的打包规则
      • 发送请求的 请求前缀
      • …

进阶配置

兼容旧版本浏览器

  • 处理浏览器兼容问题「兼容到IE10」

    1. 核心是 browserslist「配置浏览器兼容列表」

      • browserslist浏览器兼容列表

      • /package.json

        {
  "browserslist": [
    "> 1%", //使用率
    "last 2 versions", //每个浏览器向后兼容的版本
    "not ie < 10", //需要兼容IE10/11
    //"not dead", //不考虑死亡（两年内没有更新的）的浏览器，例如：IE
  ]
}

    2. 处理具体到单个浏览器的兼容

      1. CSS3的样式属性「办法：加前缀 -webkit-、-ms-、-moz-、…」
        • webpack配置规则中，自动基于 browserslist + postcss-loader + autoprefixer 给CSS3样式属性设置相关的前缀！
      2. ES6“语法”的兼容「办法：把ES6+语法转换为ES5语法」
        • webpack配置规则中，自动基于 browserslist + babel-loader + @babel/preset-env（或者@vue/cli-plugin-babel/preset）进行语法的转换！
          • 实际上在vue中是用@vue/cli-plugin-babel/preset来代替了@babel/preset-env，因为@vue/cli-plugin-babel/preset更熟悉vue语法，而@babel/preset-env对vue语法的支持不太好。
        • 特殊情况：如果我们使用了很特殊的语法（比如类的装饰器），还需要基于额外的 babel 插件单独处理！
        • 重点注意：语法包是有版本的，如果用的语法包版本低，而我们使用了特别新的ES语法，也是无法实现转换的！
      3. ES6“内置API”的兼容「办法：基于ES5的语法把用的API方法重写」

        • 此时需要依赖于第三方(官方)的相关插件：@babel/polyfill 或者 core-js 等

          • @vue/cli脚手架，默认已经完成这方面的配置处理，只需要我们修改browserslist即可

            • 脚手架根据browserslist和项目代码，自动分析出需要的polyfill，然后按需从corejs中导入，以此做到polyfill的最小导入！

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

            • 这样做，很多时候，无法完全覆盖需要的API方法（比如用到了特殊的API），此时需要我们手动导入完整的polyfill，来处理兼容!

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

              • 程序入口中(main)：

                import 'core-js/stable'
import 'regenerator-runtime'

        • 但是即便全量导入了polyfill，也不是所有的ES6的API都被重写了，例如：Fetch/Reflect/Proxy等，就没有被重写，所以要考虑兼容，这些API是不能用的！！

进阶参考

  1. browserslist浏览器兼容列表
方朝端
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目无法热更新 问题解决
qq_44741577的博客
05-11 924
如果没有安装，可以使用以下命令进行安装。
一、【VUE-CLI】Vue CLI 脚手架介绍及安装
天行健，君子以自强不息
08-03 3174
Vue CLI 脚手架介绍及安装
vue-cli安装和构建项目
qq_62881798的博客
09-26 3030
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 , 和 。这三个部分分别代表了 html,js,css。
＞ vue@0.1.0 serve ＞ vue-cli-service serve ‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或解决“vue“不是内部或外部命令问题
m0_63064861的博客
12-19 5818
vue@0.1.0 serve > vue-cli-service serve 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或解决“vue“不是内部或外部命令问题。
linux、windows 安装 vue-cli
最新发布
weixin_45782719的博客
02-02 1807
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过@vue/cli实现的交互式的项目脚手架。通过@vue/cli实现的零配置原型开发。一个运行时依赖 (可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。Vue CLI 致力于将 Vue 生态中的工具基础标准化。
vue-cli脚手架-bulid下的配置文件
08-27
Vue-cli脚手架bulid下的配置文件 Vue-cli脚手架bulid下的配置文件是Vue.js开发过程中的一部分，主要用于创建和配置Vue.js项目。通过学习和掌握这些配置文件，可以帮助开发者更好地理解Vue.js项目的结构和工作原理，...
vue-cli开发的商城源代码
01-18
在这个"vue-cli开发的商城源代码"项目中，我们可以看到一系列与前端开发、Vue.js 框架以及构建电商平台相关的知识点。 首先，`vue.js` 是一个轻量级的前端框架，由尤雨溪开发，它的核心特性包括组件化、虚拟DOM、...
Vue-cli脚手架搭建
01-08
Vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板 一、官方文档 Vue-cli 二、事先安装 得安装node.js和npm 查看版本node -v npm -v 更新至最新版本 npm install -g node npm install -g npm 三、...
Vue使用vue-cli创建项目
01-19
vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：https://github.com/Aleczhang1992/my-vue-project/tree/dev 一、步骤 1.要求已安装Node.js (>=4.x, 6.x ...
vue-cli脚手架的安装教程图解
12-02
vue-cli脚手架模板是基于node下的npm来完成安装，下面给大家介绍vue-cli脚手架的安装，具体内容如下所述： https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件： node在4.以上，npm在3以上，查看...
踩坑记录:vue-cli脚手架升到5.0.0版本后运行项目自动打开会报0.0.0.0:8080无法访问
凉城玖的博客
04-16 2568
踩坑记录:vue-cli脚手架升到5.0.0版本后运行项目自动打开会报0.0.0.0:8080无法访问 vue-cli脚手架5.0版本及其以上设置运行项目后自动在浏览器中打开会出现 解决办法： 1.第一种解决办法 回退vue脚手架版本，我直接回退到了4.5.0版本，再重新创建项目，就ok了 npm uninstall vue-cli -g // 卸载全局脚手架 npm install -g @vue/cli@4.5.0 // 安装指定版本 第二种方式 在vscode终搜索0.0.0.0,然后修
配置了环境变量打包后去掉console.log
古月水告的博客
03-22 548
里配置的无效，如果需要判断打包使用不同环境的配置，可以使用。.env.development文件。.env.production 文件。vue.config.js 中配置。package.json文件。编译打包test的时候执行。.env.test 文件。注意：编译的时候一定要是。创建新的变量用来判断。创建config.js。
vue-cli详细说明
hlonelier的博客
05-31 321
单页面应用程序（Single Page Application）一个web网站只有唯一一个HTMl页面，所有功能&交互都在唯一一个页面完成。
'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
山河野
12-09 5万+
今天不小心把“node_modules”这个文件夹删除，然后就报了这个错误 解决的办法就是将“node_modules”文件夹删除，重新运行npm install,就好了
Vue-cli 安装使用详细教学
weixin_50665010的博客
05-04 3156
一:安装 设置npm的淘宝镜像: npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址 npm config get registry #查看镜像地址 全局安装命令: npm install -g @vue/cli 注意: 如果半天没动静(95%都是网速问题), 可以ctrl + c 停止安装，换一个网络环境来继续重新安装。 检查是否安装成功 在任意小黑窗中：vue --version 如果可以看...
vue项目运行报错：serve: `vue-cli-service serve`
热门推荐
weixin_43193877的博客
01-29 9万+
vue项目运行报错：serve: vue-cli-service serve 首先，你先去检查下你配置的 host:地址是多少 ，比如我的是localhost,如果用的是局域网IP 那就要更改成你目前的局域网IP 或 改成localhost module.exports = { devServer: { open: false, // 设置主机地址 ...
Vue CLI 3.x的使用(2)-安装
事非宜，勿轻诺；苟轻诺，进退错。
09-05 2378
Vue CLI v3.x官方教程：https://cli.vuejs.org/guide/ 关于与先前版本的说明 1. 包名由vue-cli变更为@vue/cli； 2. 若需要全局安装旧版本的vue-cli(1.x或2.x)，则需要先卸载已安装的版本，卸载指令：npm uninstall vue-cli -g或yarn global remove vue-cli。 Node版本要求 N...
vue-cli 3.0脚手架cli-service配置
椰汁菠萝
07-17 1万+
CLI服务 在package.json使用默认预设的项目中看到的内容 { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } 您可以使用npm或Yarn调用这些脚本： npm run serve # OR yarn serve 如果您有npx...
vue项目运行vue-cli-service serve报错解决方法
qq_39077394的博客
04-08 2万+
先上一张报错信息图片 试过删除node_modules重新安装还是不行 我的解决方法： 右键计算机属性，选择高级系统设置=>环境变量 在\Microsoft VS Code\bin后面添加 ;%SystemRoot%\system32;（注意分号;） 然后在path环境中配置C:\Windows\System32 最后去项目安装依赖 npm i 或者 cnpm i 运行项目 npm run serve 如果这样子项目还是报同样的错误，那么就把node全局卸载，去控制面板卸载，然后安装，最后安装依赖
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值