Logo

菜单

发布于 2026-01-06 1 阅读
0

Laravel 使用技巧：在 Laravel mix 中设置解析别名 前提条件 问题 解决方案 参考资料

Laravel 小技巧：在 Laravel mix 中设置解析别名

先决条件

问题

解决方案

参考文献

这虽然与 Laravel 无关，但与 Webpack 有关，不过，我觉得我应该在项目开始时就设置好这一点。

先决条件

发展

  • Laravel 5.4
  • webpack（Laravel mix）

问题

我过去常常在任何文件中使用相对路径来指定文件路径.js：

// resources/assets/vue/components/Deep/Path/To/Component.vue

import FooComponent from '../../FooComponent.vue'
Enter fullscreen mode Exit fullscreen mode

这很难理解，如果我更改目录结构，就必须更改每个路径。

而且看起来很丑。

解决方案

在开头添加以下配置webpack.mix.js。

// webpack.mix.js

const { mix } = require('laravel-mix')

mix.webpackConfig({
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': __dirname + '/resources/assets/js'
    },
  },
})

// ...config follows
Enter fullscreen mode Exit fullscreen mode

然后，我们可以这样导入：

// resources/assets/vue/components/Deep/Path/To/Component.vue

import FooComponent from '@/components/FooComponent'
Enter fullscreen mode Exit fullscreen mode

我发现vue-cli它使用了这种配置。它将解析别名设置@为src默认值。

https://github.com/vuejs-templates/webpack/blob/f21376d/template/build/webpack.base.conf.js#L40

希望这个配置能成为 Laravel Mix 的默认配置。
我在考虑要不要提交一个 PR……

参考文献

文章来源：https://dev.to/acro5piano/laravel-tips-set-resolve-alias-in-laravel-mix-6f5
公关审查原则概述
如何使用 Cloudinary 和...