Referencias
Si no: https://segmentfault.com/a/1190000019920162
Manual: https://cli.vuejs.org/zh/config/
Configuración global de vue.config.js
Parámetros de configuración:
1. Dos métodos de configuración
module.exports = {
// 选项……
}
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// 选项……
})
2.baseUrl / baseUrl
Dirección de recursos estáticos.
module.exports = {
// baseURL:'./' // vue-cli版本是3.2.0以前的
publicPath:'./' // publicPath属性适用于vue-cli 高于3.2.0的项目
}
Cambio de modos de diferentes entornos de desarrollo:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/生产环境路径/' : '/'
}
3.salidaDir
La dirección de directorio de los archivos de compilación de producción .
module.exports = {
outputDir:'newBuild'
}
4.assetsDir
El directorio (relativo a outputDir) donde se colocan los recursos estáticos generados (js, css, img, fonts) .
module.exports = {
assetsDir:'staticDir'
}
5.indexPath
Especifica la ruta de salida (relativa a outputDir) del index.html generado.
module.exports = {
indexPath:'indexHtmlPath'
}
6. nombre de archivo Hashing
Los recursos estáticos generados incluyen hashing en sus nombres de archivo para un mejor control del almacenamiento en caché, desactive el hash de nombre de archivo configurando esta opción en falso.
module.exports= {
filenameHashing:false,
}
7.páginas
Embalaje de varias páginas
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
}
8.lintOnSave
Ya sea para aplicar pelusa al código en cada guardado a través de eslint-loader en el entorno de desarrollo. Este valor tendrá efecto después de que se instale @vue/cli-plugin-eslint.
module.exports= {
lintOnSave:false,
}
9.devServidor
Hacer que la superposición del navegador muestre advertencias y errores
module.exports = {
devServer: {
overlay: {
warnings: true,
errors: true
}
}
}
Valor inicial del archivo:
/**
* @type {import('@vue/cli-service').ProjectOptions}
*/
module.exports = {
// 选项...
}
Alternativamente, también puede usar las funciones de defineConfigayuda para obtener mejores sugerencias de tipos:
// vue.config.js
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// 选项
})
10compilador de tiempo de ejecución
Si usar una compilación de Vue que incluye el compilador de tiempo de ejecución.
publicPath
El original baseUrl, baseUrl ha quedado obsoleto desde Vue CLI 3.3 y se usa en su lugarpublicPath
al implementar el paquete de la aplicación 基本 URL. El uso es el mismo que el de output.publicPath del propio paquete web, pero la CLI de Vue también necesita este valor en otros lugares, así que siempre use publicPath en lugar de modificar directamente output.publicPath de webpack.
De manera predeterminada, la CLI de Vue asumirá que su aplicación se implementa en un nombre de dominio 根路径上, como https://www.my-app.com/. Si la aplicación se implementa en una ruta secundaria, debe especificar la ruta secundaria con esta opción. Por ejemplo, si su aplicación se implementa en https://www.my-app.com/my-app/, configurepublicPath 为 /my-app/
Este valor también se puede configurar 空字符串 ('') 或是相对路径 ('./')para que todos 资源都会被链接为相对路径los paquetes escritos se puedan implementar en rutas arbitrarias y también se pueden usar en sistemas de archivos como las aplicaciones híbridas de Cordova.
Restricciones en
PublicPath relativo Hay algunas restricciones en el uso de publicPath en relación con la ruta. Relative publicPath debe evitarse en los siguientes casos:
- Cuando se utiliza el enrutamiento basado en HTML5 history.pushState;
- Al crear una aplicación de varias páginas con la opción de páginas.
Este valor también tiene efecto en el entorno de desarrollo. Si desea alojar el servidor de desarrollo en la ruta raíz, puede usar un valor condicional:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
}
salidaDir
El directorio donde se generan los archivos de compilación de producciónvue-cli-service build cuando se ejecuta . (Pase en tiempo de compilación para desactivar este comportamiento).注意目标目录的内容在构建之前会被清除--no-clean
Sugerencia:
use siempre outputDir en lugar de modificar la ruta de salida del paquete web.
directorio de activos
Directorio para colocar los recursos estáticos generados (js, css, img, fonts).
indexPath
Especifica la ruta de salida (relativa a outputDir) del index.html generado. También puede ser una ruta absoluta
nombre de archivoHashing
Configuración de cifrado hash de nombre de archivo.
Referencia: https://blog.csdn.net/weixin_35773751/article/details/121726540
paginas
Cree la aplicación en modo de varias páginas. Cada "página" debe tener un archivo de entrada de JavaScript correspondiente. El valor debe ser un objeto, la clave del objeto es el nombre de la entrada y el valor es:
entry, template, filename, title 和 chunksEl objeto especificado (todo opcional excepto la entrada)- una cadena que especifica su entrada
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></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'
}
}
lintOnSave
Borre el código cada vez que guarde a través de eslint-loader en el entorno de desarrollo
Cuando se establece en verdadero o advertencia, eslint-loader generará errores de pelusa como advertencias de compilación. De forma predeterminada, las advertencias solo se enviarán a la línea de comandos y no fallarán en la compilación.
Si desea que los errores de lint se muestren directamente en el navegador durante el desarrollo, puede usar lintOnSave: 'predeterminado'. Esto obliga a eslint-loader a generar errores de lint como errores de compilación, y también significa que los errores de lint harán que la compilación falle.
Establecerlo en error hará que eslint-loader emita advertencias de pelusa como errores de compilación, lo que significa que las advertencias de pelusa harán que la compilación falle.
Alternativamente, puede configurar la superposición del navegador para mostrar advertencias y errores:
// vue.config.js
module.exports = {
devServer: {
overlay: {
warnings: true,
errors: true
}
}
}
Cuando lintOnSave es un valor real, eslint-loader está habilitado tanto en compilaciones de desarrollo como de producción. Si desea deshabilitar eslint-loader en compilaciones de producción, puede usar la siguiente configuración:
// vue.config.js
module.exports = {
lintOnSave: process.env.NODE_ENV !== 'production'
}
compilador de tiempo de ejecución
Comparación: la diferencia entre runtimecompiler y runtimeonly en vue
Si todavía usa la plantilla en el desarrollo futuro, debe elegir el compilador de tiempo de
ejecución.Si usa el desarrollo de la carpeta .vue en el desarrollo futuro, puede elegir solo el tiempo de ejecución
compilador de tiempo de ejecución
tiempo de ejecución solamente
transpilarDependencias
Por defecto, babel-loader ignora todos los archivos en node_modules. Puede habilitar esta opción para evitar dependencias de terceros no transpiladas en el código compilado.
Sin embargo, la transpilación de todas las dependencias puede ralentizar la compilación. Si le preocupa el rendimiento de la compilación, solo puede traducir algunas dependencias específicas: pase una matriz a esta opción, enumerando los nombres de los paquetes de terceros o las expresiones regulares que deben traducirse.
producciónSourceMap
No se requiere el mapa de origen del entorno de producción, se puede establecer en falso para acelerar la creación del entorno de producción.
origen cruzado
integridad
configurarWebpack
Este valor es un objeto que se fusionará en la configuración final a través de webpack-merge.
Si el valor es una función, recibirá la configuración analizada como argumento. Esta función puede modificar la configuración y no devolver nada, o puede devolver una versión clonada o fusionada de la configuración.
cadenaWebpack
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.
css.requireModuleExtension
De forma predeterminada, solo los archivos que terminan en *.module.[ext] se consideran módulos de módulos CSS. Cuando se establece en false, puede eliminar el .module del nombre de archivo y tratar todos los archivos *.(css|scss|sass|less|styl(us)?) como módulos de módulos CSS.
css.extraer
Si extraer CSS del componente en un archivo CSS separado (en lugar de código en línea que se inyecta dinámicamente en JavaScript).
Además, al crear componentes web, siempre está deshabilitado (los estilos están en línea y se inyectan en shadowRoot).
Al compilar como una biblioteca, también puede establecer esto en falso para evitar que los usuarios importen CSS ellos mismos.
La obtención de CSS está deshabilitada de forma predeterminada en el modo de desarrollo porque no es compatible con la recarga en caliente de CSS. Sin embargo, aún puede establecer explícitamente este valor en verdadero para forzar la recuperación en todos los casos.
css.sourceMap
Ya sea para habilitar los mapas de origen para CSS. Establecer en verdadero puede afectar el rendimiento de la compilación.
css.loaderOptions
Pase las opciones a los cargadores relacionados con CSS. P.ej:
module.exports = {
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
}
}
}
servidor de desarrollo
Algunos valores como host, puerto y https pueden ser anulados por argumentos de línea de comando.
Algunos valores como publicPath e historyApiFallback no deben modificarse porque deben sincronizarse con publicPath del servidor de desarrollo para que funcionen correctamente.
devServer.proxy
Si el suyo 前端应用no 后端 API 服务器se está ejecutando 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.
devServer.proxy puede ser una cadena que apunte al servidor API del entorno de desarrollo:
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
Para obtener más comportamiento de control de proxy, también puede usar una ruta: objeto de opciones
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
pluginOptions
Este es un objeto que no realiza ninguna validación de esquema, por lo que se puede usar para pasar cualquier opción de complemento de terceros. P.ej:
module.exports = {
pluginOptions: {
foo: {
// 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
}
}
}
Babel
Babel se puede configurar a través de babel.config.js.
ESLint
ESLint se puede configurar a través del campo eslintConfig en .eslintrc o package.json.
Mecanografiado
TypeScript se puede configurar a través de tsconfig.json.
2. Ejemplo de demostración
ver.config.js
(La explicación básica está en los comentarios, y la explicación detallada está debajo del ejemplo)
module.exports = {
lintOnSave: true, // ------------------------ 设置在开发环境下每次保存代码都启用eslint验证
productionSourceMap: false, // -------------- 设置生产环境的 source map 开启与关闭
css: {
// ----------------------------------- 全局引入公共样式文件
loaderOptions: {
sass: {
data: `@import "@src/css/base.scss";`
}
}
}
chainWebpack: (config) => {
// -------------- webpack 配置
config.externals({
// --------------------- 忽略打包的文件
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'element-ui': 'ELEMENT',
})
const entry = config.entry('app') // ------ 入口起点
entry
.add('babel-polyfill') // --------------- 添加插件，用于实现浏览器不支持原生功能的代码，例如对于一些不支持ES6的浏览器
.end()
entry
.add('classlist-polyfill') // ----------- 解决部分浏览器不支持一些方法，添加以后达到能支持的效果，例如element.classlist.add()方法在ie9中是不支持
.end()
entry
.add('@/mock') // ----------------------- 添加mock
.end()
},
devServer: {
// ----------------------------- 代理
// 端口配置
port: 1888,
// 反向代理配置
proxy: {
'/api': {
target: 'https://saber.bladex.vip',
ws: true, // ------------------------- 代理 websockets
pathRewrite: {
// ------------------- 重写
'^/api': '/'
}
}
}
}
}
Análisis de las dificultades de configuración:
- lintOnSave: ya sea para habilitar la validación de eslint cada vez que guarda código en el entorno de desarrollo
false： 关闭每次保存都进行检测
true： 开启每次保存都进行检测，效果与warning一样
warning： 开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败。
error： 开启每次保存都进行检测，lint 错误将显示到浏览器页面上，且编译失败。
default： 同’error’
- productionSourceMap: activa y desactiva el mapa de origen del entorno de producción
uso:
module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist', // 输出文件目录
assetsDir: './assets',
indexPath: 'index.html',
filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
lintOnSave: false, // eslint-loader 是否在保存的时候检查
productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
}
¿Qué es un mapa fuente?
Mapa fuente Traducido literalmente es un mapa de recursos. Por lo tanto, la función del mapa de origen es localizar. La ubicación de la declaración de salida de la consola del navegador en el archivo del proyecto cuando se encuentra el mapa de origen.
P.ej:
Después del embalaje:
Sin productionSourceMap activado:
abrió:
Se puede ver que después de abrir productionSourceMap, la consola del navegador nos dice claramente que la declaración de salida del resultado de la prueba está en la línea 20 de main.js. Para eso está el mapa fuente, y es muy útil cuando los desarrolladores cometen errores.
Echemos un vistazo a la comparación de archivos de proyecto empaquetados con productionSourceMap activado/desactivado:
abrió:
cerrado:
Se puede ver que después de activar productionSourceMap, los archivos js empaquetados y generados tienen un archivo .map. Cabe señalar aquí que solo js tiene un archivo .map.
Esto concluye la explicación de la configuración básica.
Cambiar entre entornos de desarrollo y producción
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}
La diferencia entre configureWebpack y chainWebpack
Parque de blogs: https://www.cnblogs.com/zjianfei/p/15141030.html
configureWebpackIgual chainWebpackque el uno, la única diferencia es que modifican la configuración del paquete web de manera diferente:
chainWebpackModifique la configuración predeterminada del paquete web en forma de programación en cadenaconfigureWebpackModifique la configuración predeterminada del paquete web manipulando objetos
(1) método chainWebpack:
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
// 修改他的选项
return options
})
}
}
(2) Los siguientes son todos configureWebpacklos métodos de configuración:
formulario de objeto configureWebpack :
module.exports = {
configureWebpack:{
resolve: {
// 别名配置
alias: {
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'configs': '@/configs',
'views': '@/views',
'plugins': '@/plugins',
}
}
}
}
formulario de la función configureWebpack :
module.exports = {
configureWebpack:(config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
} else {
// 为开发环境修改配置...
config.mode = 'development'
}
// 开发生产共同配置别名
Object.assign(config.resolve, {
alias: {
'@': path.resolve(__dirname, './src'),
'assets': path.resolve(__dirname, './src/assets'),
'common': path.resolve(__dirname, './src/common'),
'components': path.resolve(__dirname, './src/components'),
'network': path.resolve(__dirname, './src/network'),
'configs': path.resolve(__dirname, './src/configs'),
'views': path.resolve(__dirname, './src/views'),
'plugins': path.resolve(__dirname, './src/plugins'),
}
})
}
}
Detalles de proceso.env.NODE_ENV
Referencia: https://www.jianshu.com/p/f4638f5df1c7