解读vue配置文件(vue.config.js)

这篇具有很好参考价值的文章主要介绍了解读vue配置文件(vue.config.js)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
const CompressionPlugin = require('compression-webpack-plugin')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title // 网址标题
const port = 8013 // 端口配置

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  // hash 模式下可使用
  // publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'api'
        }
      },
      '/auth': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/auth': 'auth'
        }
      }
    }
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        '@crud': resolve('src/components/Crud')
      }
    },
    plugins: [
      // https://www.ydyno.com/archives/1260.html 使用gzip解压缩静态文件
      new CompressionPlugin({
        test: /\.(js|css|html)?$/i, // 压缩文件格式
        filename: '[path].gz[query]', // 压缩后的文件名
        algorithm: 'gzip', // 使用gzip压缩
        minRatio: 0.8 // 压缩率小于1才会压缩
      })
    ]
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                elementUI: {
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          config.optimization.runtimeChunk('single')
        }
      )
  },
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}

这是一个Vue.js的配置文件,用于指定项目的构建和开发服务器的行为。让我们逐步解读:

  1. resolve 函数:

    • 用于解析路径。它被定义为简化创建目录的绝对路径的过程。
  2. nameport 常量:

    • name 设置为来自设置文件的标题。
    • port 设置为 8013,表示开发服务器的端口号。
  3. publicPath

    • 此选项指定项目的基本 URL。在这种情况下,设置为 '/',表示项目预期从域的根目录提供。
  4. outputDirassetsDir

    • outputDir 指定生产构建的输出目录。
    • assetsDir 指定输出目录内静态资产(图像、字体等)的目录。
  5. lintOnSave

    • 如果为 true,eslint-loader 将在开发时保存时运行,有助于强制执行编码标准。
  6. productionSourceMap

    • 如果设置为 false,将在生产构建中禁用源映射,可能会减小构建的大小。
  7. devServer

    • 开发服务器的配置,包括端口、是否在服务器启动时打开浏览器以及用于 API 请求的代理设置。
  8. configureWebpack

    • webpack 的额外配置。
    • 提供了 webpack 配置中应用程序的名称,解析别名以更轻松地导入,以及在生产构建期间使用 CompressionPlugin 进行 gzip 压缩。
  9. chainWebpack

    • 允许链接 webpack 配置。用于自定义内部 webpack 配置。
    • 包括用于 SVG 图标加载的设置,对其他 webpack 设置的调整,以及对某些环境中不必要的插件的优化。
  10. transpileDependencies

    • 一个需要使用 Babel 转译的依赖项数组。这在你的依赖项使用现代 JavaScript 语法需要转译以确保兼容性时很有用。

总体而言,这个配置文件提供了有关构建过程、开发服务器以及 webpack 配置的各种设置,使你能够定制 Vue.js 项目的各个方面。文章来源地址https://www.toymoban.com/news/detail-798624.html

到了这里,关于解读vue配置文件(vue.config.js)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • PaddleSeg分割框架解读[02] 配置文件config详解

    以DeepLabv3+为例进行讲解

    2024年02月22日
    浏览(42)
  • 如何解决创建vue项目后没有webpack.config.js(vue.config.js)文件

    ◼️ webpack.config.js文件没有的原因 Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。 vue-cli3 之后创建的时候并不会自动创建 vue.config.js,因为这个是个可选项,所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。 vue-cil3之后创建项目后的目录结构如下

    2024年02月04日
    浏览(55)
  • vue.config.js配置详解

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。 以下是 vue.config.js 的一个基本配置: 这里只是列出

    2024年02月15日
    浏览(50)
  • 【Vue】vue.config.js 的完整配置

    之前,我有提到过,当然大家肯定也都知道,Vue3.0不在有webpack.config.js的配置;但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack, 这个时候,在Vue3.0的项目当中,我们就需要在根目录创建vue.config.js去完成webpack的一些特殊配置,默认它会被 @vue/cli-servi

    2023年04月22日
    浏览(45)
  • vue.config.js 跨域配置

    一般是配置 .env .env.production 等。 默认配置就是用 .env 示例: 为啥要封装,因为开发模式需要proxy代理。。而线上模式不需要。 /dev-api 只要不和web里的path 冲突就行,也可以取其他名字。 开发模式 就是web的路径,再加个特殊的path 用作代理。 其他模式 不需要proxy配置,直接走

    2024年02月11日
    浏览(45)
  • vue.config.js 配置proxy代理

    方案一: 配置文件 文件内容 三个文件分别是三个不同环境使用的,如线上,线上测试,本地测试。我在本地测试时三个文件都配置成了一样。  vue.config.js 配置文件 问题: 控制台显示 400 (Bad Request)或404等问题都是 vue.config.js 配置文件 的 proxy 的配置问题。 主要检查点

    2024年03月15日
    浏览(44)
  • vue.config.js中proxy配置

    这里以axios发请求为例 如果发送的请求都以 /abc 开头,那么我们就可以在proxy中进行服务器代理配置。 3.代理多个接口 方法1:监测多个接口,可以在proxy中写多个配置:(适用于target不同的代理,相同也可以用这个方法,就是会麻烦一点,对于相同的target方法2会比较方便)

    2024年02月22日
    浏览(47)
  • vue.config.js中打包相关配置

    1.原始篇 2.改进篇 通过对chunk生成的css和js文件数量和大小做限制,对代码进行压缩和分割,线上生产环境下使用cdn方式等对webpack打包优化。

    2024年01月22日
    浏览(47)
  • Vue2 系列:vue.config.js 参数配置

    1. publicPath 默认值:\\\'/\\\' 说明:部署应用包时的基本 URL,例:https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/ 提示:1. 当使用基于 HTML5 history.pushState 的路由时 2.当使用 pages 选项构建多页面应用时。 2. outputDir 默认值:\\\'dist\\\' 说明:打包目录。 提示:目标目录在构建之前会被

    2024年02月11日
    浏览(51)
  • vue.config.js使用代理配置真实请求url

    前端请求接口过程中会统一配置代理请求url,配置之后浏览器只能看到local host路径。 为方便查看请求的真实ip,需要在vue.config.js中做如下配置,便能在浏览器实时查看到真实地址 配置完重启,效果如下:

    2024年02月13日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包