在 Laravel 7.0 設置 Vue 專案的路徑別名

做法

在專案根目錄新增 webpack.config.js 檔:

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require('path');

module.exports = {
resolve: {
extensions: [
'.js',
'.vue',
],
alias: {
'@': path.join(__dirname, '/resources/js'),
},
},
};

修改 webpack.mix.js 檔,引入 webpack.config 檔:

1
2
3
4
const mix = require('laravel-mix');
const config = require('./webpack.config');

mix.webpackConfig(config);

編輯器

使用 WebStorm 編輯器時,如果出現 Module is not installed 的錯誤訊息,可以開啟 Preferences 視窗,將 Webpack 的 webpack configuration file 路徑設置為 webpack.config.js 檔的路徑。

1
/Users/<USER>/Projects/<PROJECT>/webpack.config.js