Vite Tips

别名、路径问题

// vite.config.js
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
import path from 'path'  
  
// https://vitejs.dev/config/  
export default defineConfig({  
    plugins: [vue()],  
    resolve: {  
        alias: {  
            '@': path.resolve(__dirname, 'src')  
        },  
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']  
    }  
})

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

scss 与 less 使用

• 全局使用$main-color: red;

// src/assets/scss/global.scss
$main-color: red;

// src/assets/less/global.less
@main-color: red;

// vite.config.js
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
import path from 'path'  
  
// https://vitejs.dev/config/  
export default defineConfig({  
    css: {  
        preprocessorOptions:{  
            scss:{  
                additionalData:`@import "@/assets/scss/global.scss";`  
            },
            less:{  
                additionalData:`@import "@/assets/less/global.less";`  
            }
        }  
    } 
})

Vite 本地开发使用https（生成证书）

方式1

• 安装mkcert

npm i mkcert -g

• 生成ca证书 cd 到项目某个文件夹，比如keys文件夹

mkcert create-ca [options] # options可选

• 生成cert证书

# mkcert create-cert [options] # options可选

mkcert create-cert --domains 127.0.0.1,localhost,192.168.*.*   # 逗号分隔

• vite.config.ts

server: {
    https: {
        cert: fs.readFileSync(path.join(__dirname, 'keys/cert.crt')),
        key: fs.readFileSync(path.join(__dirname, 'keys/cert.key')),
    },
},

• 重启npm run dev

方式2

• 引入@vitejs/plugin-basic-ssl插件

// vite.config.js
import basicSsl from '@vitejs/plugin-basic-ssl';

export default defineConfig({ 
    plugins: [
        basicSsl()
    ]
})