【问题标题】:`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/*"]
        }
      }
    }
    

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

    【讨论】:

      猜你喜欢
      • 2023-01-25
      • 2021-06-05
      • 2019-08-14
      • 2023-01-03
      • 2022-01-02
      • 2021-06-28
      • 2021-11-28
      • 2021-11-30
      • 2021-11-28
      相关资源
      最近更新 更多