标签: laravel-mix

我正在尝试使用laravel mix和vue js创建一个全局组件,但是当访问属性时this.$el它是未定义的.这是我的组件文件:

Datepicker.vue

<template>
<input 
    type="text" 
    :name="name" 
    :class="myclass" 
    :placeholder="placeholder"
    :value="value" />
</template>  

<script>
export default {
  props: ['myclass','name','placeholder','value'],
  data () {
    return {

    }
  },
  created () {
    console.log("this.$el", this.$el); //undefined
    console.log("this", this); //$el is defined
    var vm = this;
    var options = {
        "locale": "es",        
        "onChange": function(selectedDates, dateStr, instance) {
            vm.$emit('input', dateStr);
        }
      };

    $(this.$el)
      // init
      .flatpickr(options);      
  },
  destroyed(){
    console.log("destroyed");
  }
}
</script>

但是,当组件创建为X-Template时,它可以工作:

client.js

Vue.component('date-picker', {
  props: ['myclass','name','placeholder','value'],
  template: '#datepicker-template',
  mounted: function () { …

我正在使用Laravel mix编译我的javascript文件,因为我对Babel和package.json不是很了解,我想问一下Laravel Mix是否支持ES8,尤其是async/await？

如果我尝试一下,我无法判断Mix是否正在异步/等待ES5,或者我的浏览器是否支持async/await,这是最新版本.我仍然希望将它转换为ES2015,因此应用程序仍然适用于仅支持ES5的浏览器.

尝试使用laravel-mix,但是当我尝试npm install,或者npm install --no-bin-links,或者sudo npm install时,我在下面得到这个错误..我在Windows 8.1上使用宅基地和流浪者..请对此有任何帮助

npm WARN ETXTBSY: text file is busy, unlink '/home/vagrant/blog/mix/node_modules/abbrev/package.json.78971974'
npm ERR! path /home/vagrant/blog/mix/node_modules/acorn-dynamic-import/package.json.247239
npm ERR! code ETXTBSY
npm ERR! errno -26
npm ERR! syscall rename
npm ERR! ETXTBSY: text file is busy, rename '/home/vagrant/blog/mix/node_modules/acorn-dynamic-import/package.json.247239' -> '/home/vagrant/blog/mix/node_modules/acorn-dynamic-import/package.json'

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2017-09-04T00_51_52_140Z-debug.log

我Laravel在编译资产时遇到问题。laravel-mix默认情况下，laravel 提供了一个 webpack 的包装器，它laravel-mix使用名为 的文件webpack.mix.js，并使用npm run dev命令laravel-mix将所有文件编译js成一个 webpack 捆绑js文件。

webpack.mix.js的代码：

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

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

我有一个Main.js包含一些jquery代码的文件。

主要.js：

;( function( $, window, document, undefined ) {

    'use strict';
    $(window).on('load', function() {
        alert('ready');
    });
 }
)( jQuery, window, document );

我的目录结构是这样的

resources\assets\js

app.js
bootstrap.js
Main.js

app.js代码：

require('./bootstrap');

bootstrap.js代码：

try {
    window.$ = window.jQuery = require('jquery');// jquery
    require('bootstrap');// bootstrap framework …

如何使用Webpack编译Simditor？

我正在尝试使用 Laravel Mix 编译 Simditor，但出现以下错误：

Uncaught TypeError: Simditor.connect is not a function

这是我的js文件：

window.$ = window.jQuery = require('jquery');
import 'simple-module';
import 'simditor';

$(document).ready(function () {
    $('.input.text-editor').each(function () {
        var editor = new Simditor({
            textarea: $(this).find('textarea')
        });
    });
});

知道为什么我会收到此错误吗？

编辑器网站：simditor.tower.im

我有一个新的laravel安装,一切编译得很好,但当我通过npm安装vuex或vue路由器,编译不再工作,我得到这个错误:

错误:[vue-loader] vue-template-compiler必须作为对等依赖项安装,或者必须通过选项传递兼容的编译器实现.

我Laravel 5.4与 一起使用Vue.js 2.6。我在控制台中查看*.vue组件文件的 sourceMap 时遇到问题。我使用以下脚本配置 Laravel mix：

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

mix.webpackConfig({
    devtool: 'eval-source-map'
});

mix.js([
        'resources/assets/js/app.js'
    ], 'public/js')
    .sourceMaps()
    .version();

例如我有这样的 vue 组件：

<template>
    <div class="Example" @click="add()">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data(){
            return {
                name: 'John'
            }
        },
        methods:{
            add(){
                console.log('example click')
            }
        }
    };
</script>

但是当 Laravel mix 编译它时，我在 chrome 的源选项卡中看到这样的内容：

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c …

我在 Laravel mix 中的 URL 处理方面遇到问题。

这是我的 app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/*---------- import LightGallery from node_modules  ----------*/
@import 'lightgallery.js';

/*---------- my styles for thumbnails ----------*/ 
@import 'includes/thumbnails';

这是我的 webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
   .scripts([
          'public/js/app.js',
          'resources/js/includes/script.js'
      ],  'public/js/app.js')
   .postCss('resources/css/app.css', 'public/css', [
      require('postcss-import'), 
      require('tailwindcss'),
      require('postcss-extend'), 
      require('postcss-nested'),
      require('autoprefixer'),
    ]);

包.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll", …

据我了解，以下命令应该安装 Bootstrap、jQuery 和 popper.js：

composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev

运行这些命令后，我现在可以使用 Bootstrap 类名，但无法使用 jQuery。当我尝试添加一些 jQuery 代码时，出现以下错误：Uncaught ReferenceError: $ is not defined

我已将<script src="{{ asset('js/app.js') }}"></script>和添加<link href="{{ asset('css/app.css') }}" rel="stylesheet">到文档的头部。

我在这里错过了什么吗？

示例代码：

<!doctype html>
<html class="no-js" lang="da">

<head>
    <script src="{{ asset('js/app.js') }}"></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<script>
    $(document).ready(function () {
        alert(0);
    });
</script>
</body>
</html>

我有两个不同的 server.js 和 client.js 入口点。（我使用的是 vue-server-renderer 和 laravel-mix）-（我的 server.js 和 client.js 看起来与这里描述的完全一样-spatie/laravel-服务器端渲染，如果我进行静态导出，import Test from '../views/Test'它就可以工作..

如果我尝试在没有延迟加载的情况下导入路由，SSR 可以工作：

import Test from "../views/Test";

export const routes = [{
    path: '/my-route',
    name: "Test",  
    component: Test,
}]

但是如果我尝试延迟加载，它会在 SSR 上失败：

export const routes = [{
    path: '/my-route',
    name: "Test"
    component: () => import('../views/Test.vue'),
}]

找不到模块“./js/chunks/server/0.js?id=c3384f174123f0848451”

对于() => import('../views/Home.vue), client.js 有效，只有 server.js 无效。

我的server.js：

import renderVueComponentToString from 'vue-server-renderer/basic';
import app from './app';
import {router} from './router/index';

new …