Vue CLI开发模式下如何从浏览器获取Vue项目根路径？

核心结论 #

浏览器环境下无法直接获取本地项目的物理根路径（如E:\myApp\），这是浏览器安全机制限制导致的——前端代码运行在沙箱环境中，无权访问本地文件系统的绝对路径。

你尝试的方法失效原因 #

• process.cwd()、__dirname、path.resolve(__dirname)都是Node.js环境的API，Vue CLI通过webpack打包时，会将这些变量替换为浏览器环境对应的服务器根路径（通常为/），所以无法拿到本地物理路径。
• require.resolve是Node.js的模块解析方法，仅适用于Node环境，在浏览器中调用会触发webpack解析错误。

替代解决方案（根据实际需求选择） #

如果你的需求是区分环境、获取应用访问路径或静态资源路径，可以用以下方法：

• 配置自定义环境变量：在项目根目录的.env.development（开发环境）或.env.production（生产环境）文件中定义标识，比如：

  VUE_APP_PROJECT_ID=myApp
  

  然后在代码中通过process.env.VUE_APP_PROJECT_ID获取该值，用于区分不同项目或环境。
• 获取服务器端根路径：如果需要当前应用在浏览器中的访问根路径（如http://localhost:8080/），可以使用浏览器原生API：

  // 获取完整的 origin（协议+域名+端口）
  const origin = window.location.origin;
  // 获取当前路径的根目录
  const rootPath = window.location.pathname.split('/')[1] || '/';
  

• 访问静态资源：如果是要引用项目内的静态文件，直接使用Vue CLI配置的别名@（对应src目录）或相对路径即可，比如：

  // 引用src/assets下的图片
  import logo from '@/assets/logo.png';
  

内容的提问来源于stack exchange，提问作者Rood