uni-app vue3 配置resolve.alias不生效问题

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app vue3 配置resolve.alias不生效问题
首先我是通过Hbuilder X 创建的uni-app 默认模版 vue3 的项目，我现在需要设置路径的别名，我在项目根目录下新建了一个vite.config.js文件，内容如下：

```javascript import {defineConfig} from “vite”;
import uni from “@dcloudio/vite-plugin-uni”;
import {resolve} from “path”;

export default defineConfig({
plugins: [
uni(),
],
resolve: {
// 路径别名
alias: {
“@”: resolve(__dirname, “./src”),
},
},
}); ```

然后我又在根目录下新增了一个jsconfig.json文件，代码如下：

```javascript {
“compilerOptions”: {
“baseUrl”: “.”,
“paths”: {
“@/": ["./src/”]
}
},
“exclude”: [“node_modules”, “dist”]
} ```

当我使用@/引入路径时，运行不起来，地址错误。

项目创建方式 开发环境 版本号
Hbuilder X 创建的uni-app 默认模版 vue3 Hbuilder X 未指定版本号

Harmonyos Next教程
1 回复

在使用uni-app结合Vue 3开发时，配置resolve.alias不生效的问题通常与Webpack配置相关。uni-app底层使用了Vue CLI的Webpack配置，但默认配置可能不直接暴露给你进行修改。如果你需要自定义Webpack配置，可以通过修改vue.config.js文件来实现。

以下是一个配置resolve.alias的示例，确保它在uni-app项目中生效：

  1. 创建或修改vue.config.js文件： 在项目的根目录下，如果没有vue.config.js文件，则创建一个。这个文件是Vue CLI项目用于自定义Webpack配置的入口。

  2. 添加Webpack配置： 在vue.config.js中，你可以通过chainWebpack函数来修改默认的Webpack配置。以下是一个示例代码，展示了如何配置resolve.alias：

const path = require('path');

module.exports = {
  chainWebpack: config => {
    // 设置别名
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('@components', path.resolve(__dirname, 'src/components'))
      .set('@views', path.resolve(__dirname, 'src/views'));
  }
};

在这个例子中，我们设置了三个别名：@指向src目录，@components指向src/components目录，@views指向src/views目录。这样，在项目中就可以使用这些别名来简化路径引用。

  1. 确保uni-app支持Vue CLI配置： 请注意，uni-app在某些情况下可能不完全遵循Vue CLI的vue.config.js配置规范。如果遇到问题，确保你的uni-app版本和依赖项是最新的，或者查阅uni-app的官方文档和社区，看看是否有相关的已知问题或解决方案。

  2. 重新构建项目： 修改vue.config.js后，需要重新构建项目以使配置生效。在命令行中运行npm run dev（开发模式）或npm run build（生产模式）来构建项目。

  3. 验证配置： 在项目的Vue组件或JavaScript文件中尝试使用配置的别名来导入模块，例如：

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

如果别名正确解析，且没有报错，那么你的resolve.alias配置就已经生效了。

通过以上步骤，你应该能够在uni-app项目中成功配置并使用Webpack的resolve.alias功能。如果仍然遇到问题，请检查是否有其他配置或代码影响了Webpack的解析过程。

回到顶部