vue.config.js 配置的文件

vue.config.js是一个可选的配置文件，用于配置Vue CLI构建的项目，如webpack的配置等。使用vue.config.js，可以在项目的根目录下创建一个JavaScript文件，并在该文件中进行配置。下面是一些在vue.config.js文件中常见的配置选项和用法。

修改webpack配置

vue.config.js的一个主要用途是修改Vue CLI生成的默认webpack配置。例如，你可能想要在项目中添加一个新的webpack loader或者修改默认配置选项。可以通过修改configureWebpack和chainWebpack选项来实现这个目的。

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.txt$/,
          use: 'raw-loader'
        }
      ]
    }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = 'My App'
      return args
    })
  }
}

上面的示例中，我们使用configureWebpack选项添加一个名为raw-loader的新loader，用于加载.txt文件。此外，我们还使用chainWebpack选项通过修改html-webpack-plugin插件的配置来修改页面标题。

代理请求和跨域设置

在前端开发中，常常需要通过代理请求来避免跨域问题。Vue CLI提供了一个devServer.proxy选项，允许我们在开发服务器中设置代理规则。例如，我们可以将所有以/api开头的请求都代理到另一个服务器：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

上面的示例中，我们将所有以/api开头的请求都代理到http://localhost:3000，并开启了websocket支持和跨域设置。

配置静态资源路径

在Vue项目中，静态资源（例如图片、字体文件等）通常存放在public目录下，但是这些资源的路径在不同的环境中可能不同。在vue.config.js中，我们可以使用publicPath选项来配置静态资源的路径。例如，我们可以将静态资源路径设置为CDN地址：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? 'https://cdn.example.com/'
    : '/'
}

上面的示例中，我们根据不同的环境配置了静态资源的路径。

其他选项

vue.config.js还提供了其他一些选项，包括outputDir、assetsDir、indexPath等等。这些选项的作用和用法可以参考Vue CLI的官方文档。

以上是一些常见的vue.config.js配置选项和用法