Webpack.Mix生产环境无法编译Vue组件内图片URL的问题求助

问题排查与修复方案 #

• 核心配置错误为.vue()方法的调用位置错误，当前你将.vue()挂载在postCss()的链式调用末尾，该配置仅对JS资源处理链生效，必须放到mix.js()调用的链路之后。
• Vue组件内的图片引用需要符合webpack解析规则：仅静态硬编码的相对路径会被自动编译，若你使用了动态拼接路径（例如:src="/images/${filename}.png"），webpack无法识别对应资源，需要手动用require()包裹路径，示例：:src="require('../../images/test.png')"。
• 若要确保resources/images下的所有资源都同步到构建目录，可以额外添加目录拷贝配置兜底。

正确配置示例

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue() // 修正位置：紧跟js配置调用
    .postCss('resources/css/app.css', 'public/css', []);

// 可选兜底配置：全量同步图片目录，避免遗漏未引用的静态资源
mix.copyDirectory('resources/images', 'public/images');

• 若修正后仍不生效，检查Laravel Mix版本是否≥6.0，低版本需要手动安装对应版本的vue-loader和vue-template-compiler依赖。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov