vue 3.0 vue.config.js文件常用配置方式

下面就是关于“vue 3.0 vue.config.js文件常用配置方式”的完整攻略。

1. vue.config.js文件是什么

在Vue 3.0及以上版本中，通常需要通过vue.config.js文件进行项目的相关配置，例如webpack、开发服务器、路径等等。vue.config.js是一个可选的配置文件，如果存在，那么它会被默认加载，在vue-cli自动生成的项目结构中，vue.config.js并不会存在，需要自己手动创建。

2. 常用的vue.config.js配置方式

2.1 修改webpack配置

通过vue.config.js文件，我们可以非常方便地修改webpack的配置。比如，在项目中需要使用babel-plugin-import插件来实现按需加载的时候，我们可以在vue.config.js中配置如下：

module.exports = {
  configureWebpack: {
    plugins: [
      [
        'babel-plugin-import',
        {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true,
        },
      ],
    ],
  },
};

这里使用了configureWebpack选项来进行webpack配置，配置的具体内容就是使用了babel-plugin-import插件对vant组件库进行按需加载的配置。

2.2 配置开发服务器

在开发过程中，我们通常需要使用vue-cli提供的开发服务器来运行和调试项目。通过vue.config.js文件，我们可以修改开发服务器的相关配置。比如，需要将开发服务器设置为只能通过localhost访问，我们可以在vue.config.js中配置如下：

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: null,
  },
};

这里使用了devServer选项来进行服务器配置，host设置为localhost表示只能通过本机访问，port为端口号，proxy为设置代理，这里设置为null表示不进行代理。

3. 总结

在Vue 3.0中，vue.config.js文件是一个非常重要的配置文件，它涵盖了许多项目的配置需求。通过上述的两个示例，可以看出我们可以通过vue.config.js对webpack和开发服务器进行配置，这样就可以高效的完成我们项目所需的配置。