Vue

概述

先上完整代码

[vite.config.ts]
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 react from "@vitejs/plugin-react";
import * as path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      // disable hash suffix for output files
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`,
      },
    },
  },

  // 定义模块解析的配置
  resolve: {
    // 定义模块的别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
    // 定义模块解析时的扩展名
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
    // 定义模块解析时的条目
    mainFields: ["browser", "module", "main"],
  },
});

问题

  1. 导入path时提示: 找不到模块“path”或其相应的类型声明。
  2. 模块 ""path"" 只能在使用 "allowSyntheticDefaultImports" 标志时进行默认导入

安装一下软件

1
2
3
npm install --save-dev @types/node
# or
yarn add @types/node

修改导入方式

[vite.config.ts]
1
2
3
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import * as path from "path"; // <---- 改成这样导入