Resumen de configuración y uso de vue-cli (nuevo)

1 ¿Qué es vue-cli?

vue脚手架指的是vue-cli, es un andamiaje complejo especialmente diseñado para aplicaciones de una sola página, puede crear fácilmente nuevas aplicaciones y puede usarse para generar automáticamente plantillas de proyectos para vue y webpack

2 ¿Por qué hay múltiples vue.config.jsconfiguraciones?

Sabemos que para diferentes frameworks, como 2.0 y 3.0, tienen diferentes métodos de configuración, los cuales se explicarán en el siguiente artículo.

Dirección de configuración: https://cli.vuejs.org/zh/config/

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

estilo uno

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

estilo dos

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

4 Elementos de configuración específicos

4-1 URL base

En desuso desde Vue CLI 3.3, use publicPath

4-2 publicPath

La URL base del paquete de la aplicación implementada, que indica dónde se implementa específicamente el paquete en el servicio.

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

4-3 salidaDir

El directorio para los archivos de compilación de producción generados

4-4 activosDir

Coloque el directorio de recursos estáticos (js, css, img, fuentes)

4-5 indexPath

La ruta de salida del index.html generado

4-6 nombre de archivo Hashing

Cifrado hash de nombre de archivo

4-7 páginas

Creación de aplicaciones en modo multipágina

Modo de varias páginas (Aplicación de varias páginas MPA)
Modo de una sola página (Aplicación de una sola página SPA)

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

Ya sea para eslint-loaderpasar la detección de código
en cada guardado en el entorno de desarrollo y tener efecto después @vue/cli-plugin-eslintde la instalación

Cuando se establece en trueo warning, eslint-loader mostrará errores de pelusa como advertencias de compilación; de
forma predeterminada, las advertencias solo se enviarán a la línea de comando y no fallarán la compilación.

El lintOnSave: 'default'uso obligará a eslint-loader a generar errores de pelusa como errores de compilación

module.exports = {
    
    
  lintOnSave: 'default'
}

Solo habilitado en el entorno de producción

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

4-9 compilador de tiempo de ejecución

Ya sea para usar una compilación de Vue que incluye el compilador de tiempo de ejecución

Saltos de instrucciones específicas: ¿Qué son runtimecompiler y runtimeonly?

4-10 transpilarDependencias

Transferir todas las dependencias de terceros

De manera babel-loaderpredeterminada node_modules, se ignorarán todos los archivos, pero transpileDependenciesse pueden configurar para que comiencen.

4-11 producciónFuenteMapa

Source MapEs un archivo de información que almacena información de ubicación.

Es decir, Source Mapla correspondencia entre antes y después de la compresión y ofuscación del código se almacena en el archivo. Con él, cuando se produce un error, la herramienta de depuración mostrará directamente el código original en lugar del código convertido, lo que puede facilitar enormemente la depuración posterior.

4-12 origen cruzado

<script>Establezca <link rel="stylesheet">el atributo crossorigin de las etiquetas y en el HTML generado.

Tenga en cuenta que esta opción solo afecta a las etiquetas inyectadas por el html-webpack-plugin en el momento de la compilación; las etiquetas escritas directamente en la plantilla (public/index.html) no se ven afectadas.

4-13 integridad

Habilite la integridad de subrecursos (SRI) en las etiquetas <link rel="stylesheet">y . <script>Habilitar esta opción puede proporcionar seguridad adicional si sus archivos creados se implementan en una CDN.

Tenga en cuenta que esta opción solo afecta a las etiquetas inyectadas por el html-webpack-plugin en el momento de la compilación; las etiquetas escritas directamente en la plantilla (public/index.html) no se ven afectadas.

Además, cuando SRI está habilitado, las sugerencias de recursos de precarga están deshabilitadas debido a un error en Chrome que hace que los archivos se descarguen dos veces.

4-14 configurar Webpack

Configuración sencilla

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

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

Cadena 4-15Webpack

es una función que recibirá una instancia de ChainableConfig basada en una cadena de paquetes web. Permite modificaciones más detalladas a la configuración interna del paquete web.

4-16 css.modules

A través del módulo css, el selector css especificado se puede configurar en el formato deseado a través de una configuración común

Cadena fija -[nombre de archivo]-[nombre del selector original]-[hash de longitud 5].

Comprensión personal: cuando no use módulos parciales, agregue el espacio de nombres css

4-17 css.requireModuleExtension

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

En pocas palabras, los módulos css son muy similares a los de Vue y se utilizan para lidiar con la globalización de estilos.

4-18 css.extraer

css.extractSe usa para controlar si forzar la separación de css dentro de los componentes de vue.

Consulte https://blog.csdn.net/weixin_44869002/article/details/105831757

4-19 css.sourceMap

Ya sea para habilitar sourceMap para css

4-20 css.loaderOpciones

cargador css

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

4-21 servidor de desarrollo

código de configuración

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

Si su aplicación de front-end y el servidor de API de back-end no se ejecutan en el mismo host, debe enviar las solicitudes de API al servidor de API en el entorno de desarrollo. Este problema se puede configurar a través de la opción devServer.proxy en vue.config.js

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

4-23 paralelos

Ya sea para usar el cargador de subprocesos para Babel y TypeScript

4-24 frijoles

La aplicación web progresiva, o PWA para abreviar, es una nueva forma de mejorar la experiencia de la aplicación web, que puede brindar a los usuarios la experiencia de una aplicación nativa.

4-25 opciones de plugin

Se utiliza para pasar cualquier opción de complemento de terceros

5 Babel

Babel se puede configurar a través de babel.config.js.

6 ESLint

Se puede configurar a través del campo eslintConfig en .eslintrc o package.json

7 mecanografiado

Se puede configurar a través de tsconfig.json