如何在Laravel环境下的Vue中更简洁地从Storage文件夹导入JSON？

好的，我来帮你搞定这个冗长的导入路径问题！再也不用写一串../../../../../../../了，这里有几个实用的方法：

1. 配置路径别名（最推荐的方案） #

通过在项目配置文件中设置路径别名，把storage/app/public映射成一个简短的别名（比如@storage），这样导入时就能直接用别名代替长长的相对路径。

针对Vue CLI项目 #

修改项目根目录下的vue.config.js（如果没有就新建一个）：

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        // 把@storage指向storage/app/public目录
        '@storage': path.resolve(__dirname, 'storage/app/public')
      }
    }
  }
}

配置完成后重启开发服务器，之后你就可以这样导入：

import list from '@storage/json/listofcuisines_en.json';

针对Vite项目 #

修改项目根目录下的vite.config.js：

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

export default defineConfig({
  resolve: {
    alias: {
      '@storage': path.resolve(__dirname, 'storage/app/public')
    }
  }
});

同样重启服务后，用相同的简洁方式导入即可。

针对TypeScript项目（额外配置） #

如果你的项目用了TypeScript，还需要在tsconfig.json中添加paths配置，让TypeScript识别这个别名：

{
  "compilerOptions": {
    "paths": {
      "@storage/*": ["storage/app/public/*"]
    }
  }
}

2. 利用项目的public静态资源目录 #

如果你的JSON文件属于静态资源，可以把它移动到Vue项目默认的public目录下（比如放在public/json/listofcuisines_en.json），这样就能通过绝对路径直接导入：

import list from '/json/listofcuisines_en.json';

这种方式不需要额外配置，适合简单的静态资源场景。

3. Nuxt.js项目的配置方式 #

如果你用的是Nuxt.js，直接在nuxt.config.js中配置别名：

export default {
  alias: {
    '@storage': './storage/app/public'
  }
}

之后同样可以用@storage别名来导入文件。

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