【问题标题】:Using Vue in Laravel在 Laravel 中使用 Vue
【发布时间】:2019-04-13 01:12:42
【问题描述】:

我是 Vue 的新手,但我想我会在最近的一个项目中尝试一下,我知道它为什么喜欢它。无论如何,一切都很顺利,直到我切换到 IE,什么都没有。

出现Object doesn't support property or method 'assign' 之类的错误,我给了它一个谷歌,显然 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 吗?

【问题讨论】:

  • 通常你会使用npm run dev来编译开发。我想这就是 laravel mix 的帮助,因为它包含了将资产代码编译为兼容代码的工具。你正确使用 Laravel mix 了吗?
  • 我运行了 dev 并没有什么不同
  • 你用的是什么版本的IE?
  • IE11是我用的版本

标签: javascript php laravel vue.js webpack


【解决方案1】:

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

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

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

【讨论】:

  • 我确实花了好几个小时看这个 o_O... 有没有办法通过 Mix 加载它?另外,我为什么要废弃 vue-cli 的 Mix?
  • 所有你需要做的就是import "@babel/polyfill";作为app.js的第一行。混合应该处理其余的。 Vue CLI 几乎可以开箱即用地处理所有内容,并支持 webpack 4。它是一个更好的构建工具。
  • 好的,Mix 是否在某种程度上利用了 babel?因为require不是原生JS函数
猜你喜欢
  • 2022-01-27
  • 1970-01-01
  • 2016-11-28
  • 2020-11-04
  • 2017-02-16
  • 2021-12-10
  • 1970-01-01
  • 1970-01-01
  • 2020-06-22
相关资源
最近更新 更多