Vue+Laravel项目执行npm run production后self变量变为undefined如何解决

根本原因 #

Laravel Mix底层依赖Webpack进行代码打包，按照ES模块化规范要求，ES模块的顶层this默认等于undefined，而非浏览器全局对象window。生产模式构建时，压缩工具会直接将你写的var self = this直接优化为var self = undefined，这就是你遇到的问题的核心诱因。

解决方案 #

你可以根据自己的开发习惯选择以下任意一种方案：

方案1：直接指向全局对象（改动最小） #

直接把两个js文件里的var self = this替换为var self = window即可，生产构建时不会被替换，符合浏览器运行环境的预期。

方案2：遵循模块化规范改写（推荐） #

放弃手动挂载方法到this的写法，直接用JS模块的原生导出导入语法：

1. 修改assets/js/homepage/component/homepage.js的导出逻辑：

// 删掉var self = this这行，直接导出start方法
export function start() {
    if(!_isInit) {
        _homepage();
    }
}

2. 修改上层assets/js/homepage/homepage.js的导入逻辑：

// 删掉var self = this这行，直接导入方法
import { start as componentStart } from './components/homepage';

// 导出当前模块的start方法
export function start() {
    if(!_isInit) {
        console.log("Homepage starts..");
        componentStart();
    }
}

// 直接调用即可
start();

这种写法完全符合模块化规范，后续维护性也更好。

方案3：修改Webpack配置关闭规则 #

如果不想改动原有业务代码，可以在Laravel Mix配置中添加规则，强制把顶层this替换为window：

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

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.js$/,
                parser: {
                    topLevelThis: 'window'
                }
            }
        ]
    }
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/assets/js/homepage/homepage.js', 'public/js/homepage');

配置修改后重新执行构建命令即可生效。

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