`Vue3 - Vite`项目别名src到@不工作答案

【问题标题】：`Vue3 - Vite` project alias src to @ not working`Vue3 - Vite`项目别名src到@不工作
【发布时间】：2021-05-08 15:13:49
【问题描述】：

我已经安装了 vue3 - vite 导入类似组件的项目

import Component from '../../../../components/Component.vue'

我只想给 src 文件夹起别名并做

import Component from '@/components/Component.vue'

这是我的 vite.config.js

import vue from '@vitejs/plugin-vue'

/**
 * https://vitejs.dev/config/
 * @type {import('vite').UserConfig}
 */
export default {
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    // ...
                }
            }
        })
    ]
}

我错过了什么吗？我还应该怎么做？

【问题讨论】：

你试过添加jsconfig.json吗？我不知道jsconfig 是否可以与 Vue Vite 一起使用，但通常我将其与 Vue 2 一起使用

标签： javascript vue.js vuejs3 vite

【解决方案1】：

在vite.config.js 文件中写入以下代码块

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

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

【讨论】：

如果使用 vite v2.5.0 或更高版本 '@': path.resolve(__dirname, './src'), 。在/src之前添加.

【解决方案2】：

这对我有用：

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`
    }
  }
})

然后在组件中：

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

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

【讨论】：

我在启动开发服务器时收到警告：不受限制的文件系统访问“C:/Projects/my-vite-project/src/main.ts”出于安全考虑，访问服务之外的文件未来版本的 Vite 将默认限制允许列表。详情请参阅vitejs.dev/config/#server-fs-allow。

【解决方案3】：

与webpack 不同，Vite 默认没有@ 别名为src。以下问题对此进行了讨论：https://github.com/vitejs/vite/issues/279

最终你需要创建一个别名：

// vite.config.js 
module.exports = {
  alias: {
    '/@': path.resolve(__dirname, './src')
  }
}

// Your config 
export default {
  alias: {
    '/@': path.resolve(__dirname, './src')
  },
  plugins: [ ... ]
 }

那么你需要在你的文件中使用/@，例如：

import foo from '/@foo'

【讨论】：

我喜欢你的回答，但我不知道如何将其插入我的vite.config.js
已更新答案，希望为您的配置文件提供答案。
failed to load config from C:\Users\user\PhpstormProjects\prazdnik\vite.config.js 运行任务 C:\Users\user\PhpstormProjects\prazdnik:dev 时出错，消息为 'spawn vite启动开发服务器时出现 ENOENT' 错误：...

【解决方案4】：

这对我有用...

import vue from '@vitejs/plugin-vue'
const path = require('path')

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

【讨论】：

【解决方案5】：

Vue 3 Vite TypeScript

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

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

使用@/删除警告并为下载添加提示

tsconfig.json

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/*", "./dist/*"]
    }
  }
}

除了问题创建者的回答之外，请给下面的人投票。他将在他提问的同一天帮助他的人复制粘贴答案。

【讨论】：