博文記錄
HTML5 2023-07-04 17:17:14 437 0

查看 Vue 项目初始化自带的 HelloWorld 例子,首先在 <script> 标签中导入 HelloWorld.vue,然后在 <template> 标签中作为组件进行使用

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

导入时,使用了相对路径 ./components/HelloWorld.vue,路径比较深时,使用相对路径就会不太直观,使用绝对路径更方便。

目前在 Vue 项目中比较通用的做法是:使用 @ 表示 src 目录,引入时就可以使用 @/components/HelloWorld.vue,不管引入文件在任何地方,都可以使用这个路径进行引入。但是这个用法并不被默认支持,需要通过一番配置才可以正常使用。

配置 @ 表示 src 目录

加载 path 依赖

yarn add path

配置 vite.config.ts 文件,在 resolve 选项中配置一个 alias 别名

import { resolve } from "path"

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: [
            {
                find: '@',
                replacement: resolve(__dirname, './src'),
            }
        ]
    }
})

此时,已经可以完成编译,将导入地址调整为 @/components/HelloWorld.vue,可以看到界面可以正常展示,说明 @ 符号已经生效。

但是如果有使用 @ 导入 .ts 文件时,VS Code 会提示找不到路径,虽然不影响编译,但是看着难受。

配置 tsconfig.json 文件,在 compilerOptions 选择中增加 baseUrl 及 paths 配置

{
    "compilerOptions": {
        // ...省略其它配置项
        "baseUrl": ".",
        "paths": {
            "@/*": [ "src/*" ]
        }
    }
}

图片引用

正常情况,@就可以在 template 中使用了。

<img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />

本文转自:https://blog.csdn.net/gongm24/article/details/125645027

media iamge
StudioEIM - 冒险者讲习所
0:00