Laravel 5.6+Laravel Mix配置iView自定义Loader失败求助

Hey there! Let's work through this together since you're new to Vue, Webpack, and Laravel Mix. I've got you covered on both the vue-loader question and the iView loader issue.

First: Is vue-loader included in Laravel Mix? #

Absolutely! For Laravel 5.6 (which uses Mix versions compatible with Vue 2), vue-loader is pre-configured out of the box—you don't need to install or set it up manually. Mix handles all the base Webpack/Vue wiring for you.

Fixing the iView Loader Not Working Issue #

The problem here is that Laravel Mix wraps Webpack in a simplified API, so you can't just copy the raw Webpack config from iView's docs directly. You need to extend Mix's existing Webpack setup to integrate iview-loader properly. Here's how to do it:

Step 1: Install Required Dependencies #

First, make sure you have both iView and iview-loader installed. Run this in your project root:

npm install iview iview-loader --save
# Or if you use Yarn:
yarn add iview iview-loader

Step 2: Update Your webpack.mix.js #

Modify your Mix config to extend the existing vue-loader rules with iview-loader. This avoids conflicts with Mix's pre-built Vue setup:

const mix = require('laravel-mix');
const iviewLoader = require('iview-loader');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   // Extend Mix's Webpack config
   .webpackConfig({
     module: {
       rules: [
         {
           test: /\.vue$/,
           loader: 'vue-loader',
           options: {
             compilerOptions: {
               preserveWhitespace: false // Optional but recommended for iView
             },
             // Add iview-loader as a post-loader for Vue files
             postLoaders: {
               html: iviewLoader({
                 prefix: false // Set to true if you want to use <i-button> instead of <Button>
               })
             }
           }
         }
       ]
     }
   });

Step 3: Set Up iView in Your Vue App #

In your resources/assets/js/app.js, import and register iView:

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css'; // Don't forget the styles!

// Register iView globally
Vue.use(iView);

// Initialize your Vue instance
const app = new Vue({
    el: '#app'
});

Step 4: Verify & Troubleshoot #

• Restart Mix: After changing webpack.mix.js, stop any running npm run watch or npm run dev processes and restart them—Mix won't pick up config changes automatically.
• Check Your Mount Point: Make sure your Blade template has a <div id="app"></div> where Vue can mount itself.
• Double-Check Component Syntax: If you set prefix: true in iview-loader, use components like <i-button>; if prefix: false, use <Button> (capitalized, as iView expects).
• Read the Full Warning: The [Vue warn]: Failed to ... message will have more details—usually it's a component registration issue or a syntax problem with how you're using iView components.

Why the Official iView Docs Config Didn't Work #

Laravel Mix already defines a rule for .vue files using vue-loader. If you add a new, separate rule for vue-loader (like the iView docs show), you'll create a conflict. Instead, we modify the existing vue-loader rule that Mix provides to add iview-loader as a post-loader.

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