常用的vue.config.js配置示例

原创于 2025-04-03 00:00:00 发布 · 1.4k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue2实战指南专栏收录该内容

117 篇文章

订阅专栏

在这里插入图片描述

查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	`Openlayers` 【入门教程】 - 【源代码+示例 300+】
2	`Leaflet` 【入门教程】 - 【源代码+图文示例 150+】
3	`MapboxGL`【入门教程】 - 【源代码+图文示例150+】
4	`Cesium` 【入门教程】 - 【源代码+综合教程 200+】
5	`threejs`【中文API】 - 【源代码+图文示例200+】
6	Shader 编程【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程【配置+应用教程 100+】
9	GIS数字孪生与大模型【应用实战 100+】
10	报表与数字大屏【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

文章目录

vue.config.js 是 Vue CLI 项目中的一个可选配置文件，用于对项目的构建和开发环境进行自定义配置。它是一个可选的配置文件，位于项目的根目录下。如果存在该文件，Vue CLI 会自动加载并应用其中的配置。

在这里插入图片描述

以下是 vue.config.js 中所有可能的功能和配置项的详细列表及说明：

1. 基础配置

module.exports = {
  // 部署应用包时的基本 URL（默认为 '/'）
  publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : '/',

  // 输出文件目录（默认为 'dist'）
  outputDir: 'dist',

  // 静态资源目录（相对于 outputDir，默认为 ''）
  assetsDir: '',

  // 指定生成的 index.html 的文件名（默认为 'index.html'）
  indexPath: 'index.html',

  // 是否在开发环境下启用 source map（默认为 true）
  productionSourceMap: false,

  // 是否在保存时使用 `eslint-loader` 进行代码检查（默认为 true）
  lintOnSave: process.env.NODE_ENV !== 'production',
};

2. 开发服务器配置

module.exports = {
  // 开发服务器配置
  devServer: {
    host: '0.0.0.0', // 指定主机地址
    port: 8080,      // 指定端口号
    https: false,    // 是否启用 HTTPS
    open: true,      // 自动打开浏览器
    proxy: {         // 设置代理
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
    hot: true,       // 启用热更新
    watchOptions: {  // 监听文件变化选项
      poll: 1000,    // 每秒检查一次文件变化
      ignored: /node_modules/, // 忽略 node_modules 文件夹
    },
  },
};

3. Webpack 配置

Vue CLI 内部已经预设了 Webpack 配置，但可以通过 configureWebpack 或 chainWebpack 进行扩展或修改。

a. 使用 `configureWebpack`

module.exports = {
  configureWebpack: {
    // 新增插件或规则
    plugins: [],
    module: {
      rules: [
        {
          test: /\.txt$/,
          use: 'raw-loader',
        },
      ],
    },
  },
};

b. 使用 `chainWebpack`

module.exports = {
  chainWebpack: (config) => {
    // 修改现有规则
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap((options) => {
        options.limit = 10000;
        return options;
      });
  },
};

4. CSS 配置

module.exports = {
  css: {
    // 是否提取 CSS 到独立文件中（生产环境下默认为 true）
    extract: true,

    // 是否开启 CSS source map（默认为 false）
    sourceMap: false,

    // CSS 预处理器的选项
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
      less: {
        globalVars: {
          primary: '#333',
        },
      },
    },

    // 是否将所有 CSS 应用到全局（默认为 false）
    requireModuleExtension: true,
  },
};

5. PWA 配置

module.exports = {
  pwa: {
    name: 'My App',               // 应用名称
    themeColor: '#4DBA87',        // 主题颜色
    msTileColor: '#000000',       // Windows 磁贴颜色
    appleMobileWebAppCapable: 'yes', // iOS 是否全屏
    appleMobileWebAppStatusBarStyle: 'black', // iOS 状态栏样式
    workboxPluginMode: 'GenerateSW', // Workbox 插件模式
    workboxOptions: {},           // Workbox 配置
  },
};

6. 插件配置

module.exports = {
  pluginOptions: {
    // 自定义插件选项
    foo: {
      bar: 'baz',
    },
  },
};

7. 其他配置

module.exports = {
  // 是否启用多页模式
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
    },
    subpage: {
      entry: 'src/subpage.js',
      template: 'public/subpage.html',
      filename: 'subpage.html',
    },
  },

  // 是否启用并行构建（默认为 true）
  parallel: require('os').cpus().length > 1,

  // 是否禁用 ESLint 校验
  lintOnSave: false,

  // 是否启用现代模式（Modern Mode）
  modern: process.env.NODE_ENV === 'production',
};