vue-cli configuration and usage summary (new)

1 What is vue-cli

vue脚手架指的是vue-cli, it is a complex scaffolding specially built for single-page applications, it can easily create new applications and can be used to automatically generate project templates for vue and webpack

2 Why are there multiple `vue.config.js`configurations?

We know that for different frameworks, such as 2.0 and 3.0, they have different configuration methods, which will be explained in the next article.

Configuration address: https://cli.vuejs.org/zh/config/

3 vue.config.js base ue.config.js

style one

module.exports = {
    
    
  // 选项...
}

style two

const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  // 选项
})

4 Specific configuration elements

4-1 baseUrl

Deprecated since Vue CLI 3.3, use publicPath

4-2 publicPath

The base URL of the deployed application package, indicating where the package is specifically deployed to the service.

module.exports = {
    
    
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

4-3 outputDir

The directory for the generated production build files

4-4 assetsDir

Place static resources (js, css, img, fonts) directory

4-5 indexPath

The output path of the generated index.html

4-6 filenameHashing

Filename hash encryption

4-7 pages

Building applications in multi-page mode

Multi-page mode (MPA Multi-page Application)
Single-page mode (SPA Single-page Application)

module.exports = {
    
    
  pages: {
    
    
    index: {
    
    
      entry: 'src/index/main.js',    // page 的入口
      template: 'public/index.html', // 模板来源
      filename: 'index.html',        // 在 dist/index.html 的输出
      title: 'Index Page',           // 标签需要<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    subpage: 'src/subpage/main.js'   // 输出文件名会被推导为 `subpage.html`。
  }
}

4-8 lintOnSave

Whether to eslint-loaderpass code detection
on each save in the development environment and take effect after @vue/cli-plugin-eslintbeing installed

When set to trueor warning, eslint-loader will output lint errors as compilation warnings; by
default, warnings will only be output to the command line and will not fail compilation

Using lintOnSave: 'default'will force eslint-loader to output lint errors as compilation errors

module.exports = {
    
    
  lintOnSave: 'default'
}

Only enabled in production environment

module.exports = {
    
    
  lintOnSave: process.env.NODE_ENV !== 'production'
}

4-9 runtimeCompiler

Whether to use a Vue build that includes the runtime compiler

Specific instructions jump: What are runtimecompiler and runtimeonly

4-10 transpileDependencies

Transfer all third-party dependencies

By babel-loaderdefault all node_modulesfiles in will be ignored, but transpileDependenciescan be set to start.

4-11 productionSourceMap

Source MapIt is an information file that stores location information.

That is to say, Source Mapthe correspondence between before and after code compression and obfuscation is stored in the file. With it, when an error occurs, the debugging tool will directly display the original code instead of the converted code, which can greatly facilitate later debugging.

4-12 cross-origin

<script>Set <link rel="stylesheet">the crossorigin attribute of the and tags in the generated HTML.

Note that this option only affects tags injected by the html-webpack-plugin at build time - tags written directly in the template (public/index.html) are not affected.

4-13 integrity

Enable Subresource Integrity (SRI) on the <link rel="stylesheet">and . <script>Enabling this option can provide additional security if your built files are deployed on a CDN.

Note that this option only affects tags injected by the html-webpack-plugin at build time - tags written directly in the template (public/index.html) are not affected.

Also, when SRI is enabled, preload resource hints are disabled due to a bug in Chrome that causes files to be downloaded twice.

4-14 configureWebpack

Simple configuration

// vue.config.js
module.exports = {
    
    
  configureWebpack: {
    
    
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

// vue.config.js
module.exports = {
    
    
  configureWebpack: config => {
    
    
    if (process.env.NODE_ENV === 'production') {
    
    
      // 为生产环境修改配置...
    } else {
    
    
      // 为开发环境修改配置...
    }
  }
}

4-15 chainWebpack

is a function that will receive a webpack-chain based ChainableConfig instance. Allows finer-grained modifications to the internal webpack configuration.

4-16 css.modules

Through the css module, the specified css selector can be configured into the desired format through a common configuration

insert image description here
Fixed string -[filename]-[original selector name]-[hash of length 5].

Personal understanding: when not using partial modules, add css namespace

4-17 css.requireModuleExtension

Reference: https://segmentfault.com/a/1190000040682273?sort=newest

To put it simply, css Modules are very similar to Vue's scoped and are used to deal with the globalization of styles.

4-18 css.extract

css.extractUsed to control whether to force separation of css inside vue components.

Refer to https://blog.csdn.net/weixin_44869002/article/details/105831757

4-19 css.sourceMap

Whether to enable sourceMap for css

4-20 css.loaderOptions

css loader

module.exports={
    
    
  css:{
    
    
    loaderOptions:{
    
    
		css:{
    
    
			// css-loader
		},
		postcss:{
    
    
 			// postcss-loader 
 		}	
 	}
  }
}

4-21 devServer

configuration code

devServer:{
    
    
      //运行代码的目录
      contentBase:resolve(__dirname,"build"),
      //监视contentBase下的全部文件，一旦文件变化，就会reload
      watchContentBase:true,
      //监视中忽略某些文件
      watchOptions:{
    
    
          ignored:/node_modules/
      },
      //端口号
      port:3000,
      //域名
      host:'localhost',
      //启动gzip压缩
      compress:true,
      //自动打开浏览器
      open:true,
      //开启HMR功能
      hot:true,
      //不要启动服务的日志信息
      clientLogLevel:'none',
      //除了一些基本的启动信息以外，其他都不显示
      quiet:true,
      //如果出错了，不要全屏提示
      overlay:false,
      //服务器代理 -> 解决开发环境跨域问题
      proxy:{
    
    
        //一旦devServer5000接到/api/xxx的请求，就会把请求转发到另一个服务器3000
        '/api':{
    
    
           //转发后的目标地址
           target:'localhost:3000',
           // 发送请求时，请求路径重写 /api/xxx ->  /xxx （去掉a/pi）
           pathRewrite: {
    
    
              '^/api': ''
           }
        }
    }
}

4-22 devServer.proxy

If your front-end application and back-end API server are not running on the same host, you need to proxy API requests to the API server in the development environment. This problem can be configured through the devServer.proxy option in vue.config.js

module.exports = {
    
    
  devServer: {
    
    
    proxy: 'http://localhost:4000'
  }
}

4-23 parallels

Whether to use thread-loader for Babel and TypeScript

4-24 beans

Progressive Web App, or PWA for short, is a new way to improve the experience of Web App, which can give users the experience of native application.

4-25 pluginOptions

Used to pass any 3rd party plugin options

5 Babel

Babel can be configured via babel.config.js.

6 ESLint

Can be configured through the eslintConfig field in .eslintrc or package.json

7 TypeScript

Can be configured through tsconfig.json