在vite下vue文件中地址@不生效

在 Vite 中，使用 `@` 作为别名需要在配置文件 `vite.config.js` 中进行设置。你可以在该文件中添加以下内容：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src' // 设置 @ 别名为 src 目录
    }
  }
})

在上述代码中，我们使用 `resolve.alias` 配置项将 `@` 别名设置为项目中的 `src` 目录。这样，当你在 Vue 文件中使用 `@` 时，Vite 就会自动将其解析为 `src` 目录。

如果你想使用其他的别名，只需要将 `@` 替换为你自己定义的别名即可。例如，如果你想将 `@` 替换为 `~`，则可以将上述代码中的 `alias` 配置项改为：

alias: {
  '~': '/src'
}

这样，在 Vue 文件中使用 `~` 时，Vite 就会自动将其解析为 `src` 目录。

相关问题

vite @配置别名的只在vue文件生效

Vite是一个基于Vue 3的高性能前端构建工具，它使用了预加载和tree-shaking等技术来提升开发效率。关于Vite中的路径别名（alias）设置，通常是在`vite.config.js`文件中的`resolve`部分进行配置。

例如，如果你想让某个路径（比如`@components`）在整个项目中都被映射为实际的目录（如`src/components`），你可以添加这样的配置：

export default defineConfig({
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
    },
  },
});

这个配置告诉Vite，在遇到`@components`路径的时候，应该替换为`src/components`的实际路径，这仅限于`.vue`（Vue组件）文件。如果你需要在整个项目中统一这种别名，包括非`.vue`文件，你可能需要使用全局插件或者其他方法，如Rollup的`alias`选项。

然而，Vite的默认行为就是按需处理别名，只有当路径出现在源码文件（如`import { Button } from '@/components/Button.vue'）中时才会应用。如果希望所有引用都自动解析，可能会涉及到额外的配置或者使用第三方插件。

vite创建vue3项目，src别名不生效

你好！要在Vite中创建一个Vue 3项目并使src别名生效，你可以按照以下步骤操作：

1. 首先，确保你已经安装了Vite。你可以使用以下命令进行安装：

npm install -g create-vite

2. 创建一个新的Vue 3项目。在命令行中运行以下命令：

create-vite my-project --template vue-ts

这将使用Vue 3和TypeScript作为模板来创建一个新的Vite项目。

3. 进入项目目录：

cd my-project

4. 安装项目依赖：

npm install

5. 在项目根目录下创建一个`vite.config.ts`文件，并添加以下内容：

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
});

这将为`src`目录创建一个别名`@`。

6. 在`package.json`文件中的`scripts`部分添加一个`dev`脚本来启动开发服务器，并指定使用我们的配置文件：

"scripts": {
  "dev": "vite --config vite.config.ts"
},

现在，当你运行`npm run dev`时，Vite将会启动开发服务器，并且你应该可以使用别名了。例如，你可以在你的Vue组件中这样导入：

import HelloWorld from '@/components/HelloWorld.vue';

希望这可以帮助到你！如有其他问题，请随时提问。