uni-app使用vue.config.js配置路径别名报错

uni-app使用vue.config.js配置路径别名报错

操作步骤：

  • 见bug描述

预期结果：

  • 无报错

实际结果：

  • 见bug描述

bug描述：



#### 项目目录：见附件

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
10:21:37.012 SassError: File to import not found or unreadable: @common/common.scss.
10:21:37.017 Parent style sheet: F:\运维平台重构\可视化创建\pages\index\index.vue
10:21:37.027 on line 111 of stdin
10:21:37.027 >> @import ‘@common/common.scss’;
10:21:37.038 ^
10:21:37.048 文件查找失败：’@api’ at main.js:4
10:21:37.057 文件查找失败：’@components/quick-message/quick-message.vue’ at main.js:5


更多关于uni-app使用vue.config.js配置路径别名报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app使用vue.config.js配置路径别名报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中配置路径别名时，需要在vue.config.js中正确设置configureWebpack。根据错误信息，问题可能出现在Sass文件导入和JavaScript模块解析上。

首先，确保vue.config.js配置了正确的别名：

const path = require('path')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@common': path.resolve(__dirname, 'src/common'),
        '[@api](/user/api)': path.resolve(__dirname, 'src/api'),
        '[@components](/user/components)': path.resolve(__dirname, 'src/components')
      }
    }
  }
}

对于Sass导入问题，需要在vue.config.js中额外配置loader选项：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@common/common.scss";`
      }
    }
  }
}

同时检查项目结构是否与配置的路径匹配，确保src/common/common.scss文件实际存在。如果使用HBuilderX，可能需要重启服务使配置生效。

对于JavaScript模块的路径解析，确认main.js中的导入语句使用了正确的别名：

import api from '[@api](/user/api)/index'
import QuickMessage from '[@components](/user/components)/quick-message/quick-message.vue'
回到顶部