面试题：Vue中如何自定义Vue CLI配置文件

Question

在Vue项目中，简述使用Vue CLI时自定义配置文件的方法及常见的配置项有哪些，比如如何配置别名路径、如何修改Webpack的默认加载器规则。

Answer 1

自定义配置文件方法

1. 创建配置文件：在项目根目录下创建 vue.config.js 文件（如果没有的话）。该文件会被 Vue CLI 自动加载并用于修改默认配置。
2. 导出配置对象：在 vue.config.js 中导出一个包含自定义配置的对象。例如：

module.exports = {
  // 在这里添加自定义配置
}

常见配置项

1. 配置别名路径：通过 configureWebpack 选项修改 webpack 的 resolve.alias 配置。

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    }
  }
}
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}

2. 修改Webpack的默认加载器规则：使用 chainWebpack 选项，它允许你更细粒度地控制 webpack 配置。例如修改 sass-loader 的配置：

module.exports = {
  chainWebpack: config => {
    config.module
    .rule('sass')
    .use('sass-loader')
    .tap(options => {
        // 修改 sass-loader 的选项
        return {
          ...options,
          additionalData: `@import "@/styles/main.scss";`
        }
      })
  }
}

其他常见配置项还包括：

• publicPath：指定项目的基础路径，默认为 '/'。例如部署到非根路径下可设置为 '/subPath/'。
• outputDir：指定构建输出目录，默认是 dist。
• assetsDir：指定生成静态资源的目录，默认是空字符串。
• lintOnSave：是否在开发环境下每次保存时 lint 代码，默认 true。
• devServer：开发服务器配置，如 host、port、proxy（代理配置）等。例如：

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}