之前一直是使用webpack来创建vue项目，但是在最近看了一些文档发现vite其实来用于开发好像会更爽。并且在现在的版本中来说，已经是非常的稳定了。并且也有很多公司都已经用于实际生产项目中。

vite对比webpack

第一个最大的优势就是项目的构建速度“快”，随着项目越来越大，vite的优势会越来越明显。这种快是在构建模式来上体现出来的，vite类似于只构建首页来提升了构建速度，而webpack在构建的时候会构建整个应用

Vite的安装和使用

npm install -g vite即可安装最新版本的vite。

在安装后也可以通过vite -v来查看安装的版本

vite需要Node.js版本>=12.0.0

使用vite创建项目也是比较简单的，可以直接执行npm init vite,在输入项目名字。选择vue即可。

FAQ

Vite创建好了项目进入后启动报错

这个需要注意看提示，在创建完成后，进入创建的目录，需要优先执行npm install先安装才可以的。如果你能正常创建项目什么的，通常可能都是没有安装。

Vite项目只有本地Local地址，没有Network地址

打开项目的package.json文件，找到scripts下的dev修改为"vite --host"保存后，重新启动项目即可。

Vite使用@软链接不生效问题

Vite本身并不支持软路由，但是可以通过Vite提供的resolve.alias来进行配置。

# vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { join } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    //软链接
    resolve: {
        alias: {
            '@': join(__dirname, '/src')
        }
    }
})

Vite解决跨域问题

因为没有了webpack，所以可以通过使用vite提供的server.proxy方法来解决。

// utls.request.js
import axios from 'axios'

const service = axios.create({
    baseURL: '/api',
    timeout: 5000,
    headers: {
        .....
    }
})

export default service

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    // 代理配置
    server: {
        proxy: {
            // 代理所有 /api 的请求
            '/api': {
                // 代理请求之后的请求地址
                target: 'https://www.wuyabala.com/',
                // 跨域
                changeOrigin: true
            }
        }
    }
})