Vite学习笔记

常用配置

配置@别名

vite.config.ts中，通过resolve.alias进行配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  // ! 同时配置下 router 的 base
  base: process.env.NODE_ENV === 'production' ? '/test/3d/relationship/' : './',
  // base:
  //   process.env.NODE_ENV === 'production'
  //     ? '/test/lishaojie/relationship/'
  //     : './',
  plugins: [vue()],
  resolve: {
    extensions: ['.ts', '.js', '.vue'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@assets': path.resolve(__dirname, 'public/assets'),
      '@models': path.resolve(__dirname, 'public/assets/models'),
      '@images': path.resolve(__dirname, 'public/assets/images')
    }
  },
  // 务必要设置host，否则手机通过电脑网络上网时，无法访问到电脑启动的服务
  server: {
    host: '0.0.0.0'
  },
  build: {
    sourcemap: true
  }
});

引用本地资源

vite项目中使用第三方js文件本地化使用_vite 引入第三方js_行致的博客-CSDN博客

sourcemap

开发环境默认就是开启的

正式环境在vite.config.js中的build下配置一个sourcemap: true即可。