vue.config.js 的配置

在 Vue.js 项目中，vue.config.js 文件是一个可选的配置文件，用于对 Vue CLI 项目进行自定义配置。你可以通过修改 vue.config.js 文件来调整开发服务器、构建设置、代理、webpack 配置等。这个文件位于项目的根目录下。

以下是 vue.config.js 的一些常见配置项和示例：

1. 基本配置

module.exports = {
  // 配置 publicPath
  publicPath: '/app/', // 设置应用的基础路径

  // 配置输出目录
  outputDir: 'dist', // 默认值是 'dist'

  // 设置静态资源目录
  assetsDir: 'static', // 默认值是 'static'

  // 设置构建时的生产环境 source map
  productionSourceMap: false, // 在生产环境下禁用 source map（提高构建速度）
};

2. 开发服务器配置

module.exports = {
  devServer: {
    port: 8080, // 设置端口号
    open: true, // 启动时自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 代理目标
        changeOrigin: true, // 是否改变请求头中的 origin
        pathRewrite: { '^/api': '' }, // 重写路径
      },
    },
  },
};

3. 修改 webpack 配置

可以通过 configureWebpack 或者 chainWebpack 来修改 Webpack 配置：
使用 configureWebpack

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': '/src', // 自定义别名
      },
    },
  },
};

使用 chainWebpack

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@components', '/src/components') // 自定义别名
      .set('@assets', '/src/assets');
  },
};

4. CSS 配置

module.exports = {
  css: {
    // 是否启用 CSS 分离
    extract: true,

    // 传递给 CSS 预处理器的配置
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/styles/variables.scss";`, // 引入全局 Sass 变量
      },
    },
  },
};

5. 插件配置

如果你使用了某些插件（如 PWA 插件），可以在 vue.config.js 中进行相关配置：

module.exports = {
  pwa: {
    name: 'My PWA App', // PWA 名称
    themeColor: '#42b983', // PWA 应用主题色
    workboxOptions: {
      skipWaiting: true,
    },
  },
};

6. 环境变量的配置

你还可以根据不同的环境（开发、生产等）来配置不同的设置。例如：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : '/',
};

7. 其他常用配置

lintOnSave: 控制是否开启 ESLint 检查。
transpileDependencies: 用于配置哪些依赖需要被 Babel 转译。
runtimeCompiler: 启用运行时模板编译（对于大型项目可能会有所帮助）。

module.exports = {
  lintOnSave: true, // 开启 ESLint 检查
  transpileDependencies: ['some-package'], // 需要转译的依赖
  runtimeCompiler: true, // 启用运行时编译器
};

配置说明：

publicPath：用于设置部署应用包时的基本 URL。默认情况下是 '/'，可以根据部署需求修改。
devServer：开发服务器的配置项，常用来配置端口、代理、热更新等。
configureWebpack：允许你修改 Webpack 配置。
chainWebpack：是 configureWebpack 的增强版，提供更细粒度的控制，通过链式 API 修改 Webpack 配置。
css.loaderOptions：用于向 css-loader、sass-loader 等 CSS 相关的 loader 传递配置。

总结

vue.config.js 文件是 Vue CLI 项目的核心配置文件之一，通过该文件可以灵活配置开发、构建过程中的各项设置。具体可以根据项目的需要来调整配置内容。如果你不需要复杂的自定义配置，通常默认的 vue.config.js 就能满足大多数需求。