vue.config.js 配置

vue.config.js 文件是 Vue CLI 项目中的全局配置文件,它允许你以 JavaScript 的形式来配置构建选项,而不是通过命令行参数或者 .vue-clirc 的 JSON 格式。
官方文档: https://cli.vuejs.org/zh/config/#全局-cli-配置

基础配置

  1. publicPath

    • 设置构建好的文件被部署后的公共路径。
    module.exports = {
    	publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
    };
    
  2. outputDir

    • 构建输出的目录,默认是 dist
    module.exports = {
    	outputDir: 'dist',
    };
    
  3. assetsDir

    • 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)。
    module.exports = {
    	assetsDir: "static",
    };
    
  4. indexPath

    • 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。默认 'index.html'
    module.exports = {
    	indexPath: "index.html",
    };
    
  5. productionSourceMap

    • 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
    module.exports = {
    	productionSourceMap: false,
    };
    
  6. filenameHashing

    • 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。默认 false
    module.exports = {
    	filenameHashing: false,
    };
    
  7. lintOnSave

    • 是否开启 eslint 保存检测,有效值:ture | false | 'error'
    • 设置为 true'warning' 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。
    • 如果你希望让 lint 错误在开发时直接显示在浏览器中,你可以使用 lintOnSave: 'default'。这会强制 eslint-loaderlint 错误输出为编译错误,同时也意味着 lint 错误将会导致编译失败。
    • 设置为 error 将会使得 eslint-loaderlint 警告也输出为编译错误,这意味着 lint 警告将会导致编译失败。
    • 设置 false 关闭 lint 警告
    module.exports = {
    	lintOnSave: false,
    };
    
  8. runtimeCompiler

    • 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。默认 false
    module.exports = {
    	runtimeCompiler: false,
    };
    

    更多细节可查阅: Runtime + Compiler vs. Runtime only

  9. transpileDependencies

    • 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项,以避免构建后的代码中出现未转译的第三方依赖。

    不过,对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑,你可以只转译部分特定的依赖:给本选项传一个数组,列出需要转译的第三方包包名或正则表达式即可。

    module.exports = {
    	transpileDependencies: false,
    };
    
  10. crossorigin

    • 设置生成的 HTML 中

你可能感兴趣的:(javascript,vue.js,前端,webpack,开发语言,前端框架)