前端开发

vite vue3 new Url 如何使用别名?

data() { const url = new URL('../../../../assets/logo.png', import.meta.url…
关注者
7
被浏览
16,510

4 个回答

头疼了很久的别名引入ts，终于解决了。首先介绍一下情况：

在配置别名之后，用@来引入图片、css文件都是没问题的，当然引入js文件也没问题，但是引入ts文件的时候就会报错：

为了解决这个报错，需要在tsconfig.ts新加个配置： 

{
  "compilerOptions": {
    ......
    "paths": {
      "@": ["./src"],
      "@/*": ["./src/*"] // 多加个这个

再奉上vite.config.ts的代码 

export default defineConfig({
  resolve: {
    // 别名
    alias: {
      "@": path.join(__dirname, "./src"),
    // extensions: [".ts", ".js"],


解决了！！！！！！！！！！！ 

/src/utils/file.ts
export const handleAssetsUrl = (url: string) => {
  return new URL(`../${resolvePath(url)}`, import.meta.url).href;
const resolvePath = (path: string) => {
  if (path.startsWith("@/")) return path.replace("@/", "");
  if (path.startsWith("/")) return path.replace("/", "");
  else return path;

需要被vite正确处理 

<script setup lang="ts">
import { handleAssetsUrl } from "@/utils/file";
</script>
<template>