2020年03月03日 357点热度 0人点赞 0条评论


在laravel框架中使用vue脚手架,无法直接修改 webpack.config.js 。


在 package.json 文件中我们看到 webpack.config.js 文件在 node_modules/laravel-mix/setup/webpack.config.js ,把它复制到项目根目录。

cp node_modules/laravel-mix/setup/webpack.config.js .

安装 webpack-merge

yarn add webpack-merge

编辑根目录下的 webpack.config.js ,下面是一个例子。

 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
let mix = require('./node_modules/laravel-mix/src/index');

let ComponentFactory = require('./node_modules/laravel-mix/src/components/ComponentFactory');

new ComponentFactory().installAll();


 * Just in case the user needs to hook into this point
 * in the build process, we'll make an announcement.

Mix.dispatch('init', Mix);

 * Now that we know which build tasks are required by the
 * user, we can dynamically create a configuration object
 * for Webpack. And that's all there is to it. Simple!

let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');

let MergeConfig = require("webpack-merge");
const webpackConfig = new WebpackConfig().build();

const AddWebpackConfig = {
    resolve: {
        alias: {
            '@': path.resolve('resources/vue')
module.exports = MergeConfig(webpackConfig, AddWebpackConfig)