Vite配置别名之详解

一、影响到node_modules

在使用Vite进行开发时，当我们使用npm或yarn引入模块时，会发现在代码中要使用相对路径或者绝对路径去引用是很麻烦的一件事情。这也是因为相对路径或绝对路径并不能达到我们想要的快速开发的目的，同时也显得不够简洁易懂。在这种情况下，我们就需要使用Vite做一些配置，来优化我们的开发体验。当使用Vite配置别名时，会影响到node_modules中的模块，也使得我们可以使用别名的方式进行引用。我们可以通过以下代码配置：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@': '/src'
    }
  }
});

此时我们就可以不再使用相对路径或绝对路径去引入node_modules中的模块，而是使用我们自定义的别名，来达到快速开发的目的。

二、Vite配置

当我们使用Vite进行开发时，我们需要在项目根目录下新建一个名为vite.config.js的文件来配置我们的Vite开发环境，其中包含了我们需要用到的各种配置项。而我们在配置别名时，也需要在此文件中进行相应的配置。以下是一个Vite配置别名的示例代码：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@': '/src'
    }
  }
});

在这段代码中，我们首先使用import导入了defineConfig方法，然后使用export default暴露了我们的配置对象。其中，resolve配置中的alias就是我们配置别名的地方。我们可以采用对象的形式，在其中添加我们的别名与对应的路径，使得我们可以在代码中以别名的形式进行引用。

三、Vite配置相对地址

在编写代码时，常常会用到相对路径的方式进行模块或者组件的引用，而这种方式会显得非常繁琐和麻烦，尤其是在项目规模较大的情况下。所以，在使用Vite时，我们可以使用配置相对地址的方式对这种引用方式进行优化。以下代码示例展示了如何配置相对地址：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@': '/src'
    }
  },
  base: './' // 设置基本路径
});

这里，我们使用了base属性，来设置我们的项目的基本路径。我们可以设置为相对路径或者绝对路径。在这里，我们设置的是相对路径，即在根目录下。配置后，我们就可以直接使用相对路径的方式来引用我们的模块或者组件了。

四、Vite配置cdn

当我们需要在项目中使用一些第三方的库或者资源时，为了减少资源的下载时间，提高网页的加载速度，我们可以使用cdn来进行优化。在使用Vite时，我们也可以对cdn进行相关的配置，使得我们的项目可以更好地使用cdn。以下是一个cdn配置的代码示例：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@': '/src'
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
         vue: ['vue']
        }
      }
    }
  },
  cdn: {
    css: [
      'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js'
    ],
    js: [
      'https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.prod.js',
      'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.8/vue-router.cjs.prod.js',
      'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js'
    ]
  }
});

在这里，我们使用了build选项中的rollupOptions配置项来进行了cdn的相关配置。其中，我们设置了manualChunks，将vue打包在一起，使得我们可以更好地使用cdn。同时，我们在cdn配置中，分别设置了css和js两个资源的cdn地址，让我们可以通过cdn方式引用这些资源，提高网页的加载速度。

五、Vite配置Vue

Vue作为现在最受欢迎的前端框架之一，在使用Vite进行开发时，我们也需要对Vue进行相关的配置。以下是一个Vue相关配置的示例代码：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@': '/src'
    }
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('i-')
        }
      }
    })
  ]
});

在这段代码中，我们使用了Vue的插件来进行相关的配置，其中包括了关于Vue模板的一些配置，如isCustomElement。这里，我们将isCustomElement设置为以i-开头的标签都是自定义元素，使得我们可以使用这些自定义元素来进行开发。

六、Vite常用配置

在使用Vite时，还有一些常用的配置项，包括了base、assetsDir、outDir、server、proxy等等。以下是一个常用配置的代码示例：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  base: './',
  assetsDir: './',
  outDir: 'dist',
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'https://api.xxx.com/',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
});

在这个示例中，我们使用了常用的配置项进行了配置。其中，base属性设置为相对路径的根目录；assetsDir表示静态资源的位置；outDir指定输出文件的位置；server中包含了port、open、proxy等属性，可以进行服务器的相关配置；最后，我们还配置了服务器代理，将/api的请求转发到我们指定的目标地址，使得我们可以在开发中使用代理，更好地调试我们的代码。

七、Vite配置代理

在使用Vite进行开发时，我们常常需要涉及后台接口调用等情况。为了让我们的调试更加方便，我们可以使用Vite进行代理配置。以下是一个Vite配置代理的代码示例：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  proxy: {
    '/api': {
      target: 'http://localhost:3000/',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
});

在这个示例中，我们使用了proxy属性来进行代理的相关配置。其中，target属性指定我们需要代理的目标地址；changeOrigin属性可以把我们使用的主机名代理到target目标主机中去；rewrite属性可以重写URL路径，把我们以/api开头的路径重定向到目标地址中。

八、Vite配置两个访问地址

在进行开发的时候，我们常常需要使用到webpack-dev-server的代理服务和npm run dev所启动的本地服务器。而在Vite中，我们同样可以配置两个访问地址，来满足我们的开发需求。以下是一个Vite配置两个访问地址的代码示例：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000/',
        changeOrigin: true
      },
      '/foo': {
        target: 'http://localhost:5000/',
        changeOrigin: true
      }
    }
  }
});

在这个示例中，我们配置了两个代理地址，分别是/api和/foo。当我们的请求路径是以/api开头的话，那么我们就会访问到本地服务器上的4000端口。同理，当我们的请求路径是以/foo开头的话，那么我们就会访问到本地服务器上的5000端口。

总结

通过本文的介绍，我们了解了Vite配置别名的多个方面，包括了影响到node_modules、Vite配置、Vite配置相对地址、Vite配置cdn、Vite配置Vue、Vite常用配置、Vite配置代理和Vite配置两个访问地址等。对于使用Vite进行开发的同学来说，配置别名是必须要学会的一项知识，可以大大提高我们的开发效率和代码可读性。