在Laravel中使用Vue

时间:2018-11-09 12:59:49

标签: javascript php laravel vue.js webpack

我是Vue的新手,但我想我可以在最近的项目中尝试一下,我可以明白为什么它很喜欢。无论如何,一切都很好,直到我切换到IE为止,那里什么都没有。

由于存在类似Object doesn't support property or method 'assign'之类的错误,我给了它一个Google,显然IE不能很好地支持ES6:Getting Error: Object doesn't support property or method 'assign'

因此,我听说过Babel,因为它可以从ES6进行转换,因此看起来可以完成这项工作。之后,我尝试将Babel集成到我的Laravel项目中。

我更新了webpack.min.js如下:

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

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/

mix.js('resources/assets/js/app.js', 'public/js')
    .webpackConfig({
        module: {
            rules: [{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            }]
        }
    })
    .sass('resources/assets/sass/app.scss', 'public/css');

if (!mix.inProduction()) {
    mix.webpackConfig({
            devtool: 'source-map'
        })
        .sourceMaps();
} else if (mix.inProduction()) {
    mix.version();
}

mix.browserSync({
    proxy: '127.0.0.1:8000'
});

env包引用:https://babeljs.io/docs/en/babel-preset-env

但是,这似乎无法解决我的问题。

我应该改用mix.babel吗?

1 个答案:

答案 0 :(得分:2)

您需要一个polyfill:https://babeljs.io/docs/en/babel-polyfill

将其作为条目(app.js)的第一行导入。

但是,我建议您使用vue cli而不是完全使用laravel mix。