在JavaScript文件中访问VUE_APP变量时编译报错的问题求助

我们在Vue项目中使用VUE_APP_前缀的环境变量配置路径别名，在.js文件中调用该别名后，将文件引入Vue组件时出现编译错误，以下是问题详情及解决办法：

相关配置细节 #

1. env.development 文件 #

VUE_APP_MYLIB='mylib'

2. vue.config.js 文件 #

configureWebpack: {
    resolve: {
        alias: {
            '@MyLib': path.resolve(__dirname, process.env.VUE_APP_MYLIB),
        }
    }
}

3. services.js 文件 #

import lib from '@MyLib';

4. Vue组件文件 #

<script>
import services from '@/services.js';
</script>

编译错误信息 #

ERROR  Failed to compile with 1 error

This dependency was not found:

* @MyLib in ./services.js

To install it, you can run: npm install --save @MyLib

解决步骤 #

1. 修正环境变量格式
   打开env.development，移除变量值的单引号——Vue CLI会自动解析环境变量，单引号会被当作变量值的一部分，导致路径解析错误：

   VUE_APP_MYLIB=mylib
   

2. 确认目标路径存在
   确保mylib目录确实存在于path.resolve指向的路径下（默认是项目根目录）。如果mylib在src目录下，需要调整环境变量值为src/mylib，或者修改vue.config.js中的路径拼接：

   '@MyLib': path.resolve(__dirname, 'src', process.env.VUE_APP_MYLIB),
   

3. 重启开发服务器
   修改vue.config.js或环境变量后，必须重启Vue开发服务，否则新配置不会生效。

4. 排查别名配置冲突
   如果同时使用了chainWebpack和configureWebpack配置别名，可能出现覆盖问题。建议统一使用一种配置方式，比如用chainWebpack更直观：

   chainWebpack: config => {
     config.resolve.alias
       .set('@MyLib', path.resolve(__dirname, process.env.VUE_APP_MYLIB))
   }
   

内容的提问来源于stack exchange，提问作者Marc Gil Sendra