vite搭建vue项目的一些初始配置

使用vite脚手架搭建vue3项目

执行下面命令即可，然后按步骤依次选择，这里选择vue和ts。 官网文档看这里

npm init vite@latest

启动的时候Network不存在的情况

上面这种情况属于默认情况，如果想监听IP地址，可以参考这里

// vite.config.js
server: {
  host: true // 设置为true或0.0.0.0，以监听所有地址，包括局域网和公域网
}

配置sass

直接安装sass即可，初次安装如果不起作用可以重启一下项目

npm i sass -D

配置别名

resolve.alias
webpack配置别名，常用的@代替src根路径，减少相对路径书写的麻烦。在vite中同样可配置，如下：

// vite.config.ts
import { resolve } from 'path'
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
}

遇到的问题

在引用path的时候可能会爆红、出现错误提示，可以安装下@types/node

npm install @types/node --save-dev

但是使用别名后，会在ts中使用的时候默认会有错误提示，所以还要修改下ts的配置

// tsconfig.json
{
  "compilerOptions": {
    // **
    "baseUrl": "",
    "paths": {
      "@/*": ["src/*"]
    }
    // **
  },
  // **
}