Проблема с тем, что мой `welcome.blade.php` распознал Vue, импортированный в мою папку Nuxt.js - PullRequest
Новая
       37

Проблема с тем, что мой `welcome.blade.php` распознал Vue, импортированный в мою папку Nuxt.js

0 голосов
/ 14 февраля 2019

Я работаю с Nuxt.js над моим Laravel проектом.Мне нужно было объединить их вместе, так как они поставляются с образцом при установке их в мой проект.

Я смог заставить почти все работать до того момента, когда мне понадобился мой welcome.blade.php, чтобы иметь возможность читать мой index.vue компонент, который был создан внутри моей папки resources/nuxt/pages.

В настоящее время проблема, с которой я сталкиваюсь, заключается в том, что у меня есть «неожиданный идентификатор в строке 1 моего public/App.js» файла, куда я импортирую vue.

Import Vue from 'vue'

SO.Как все скомпилировано, через мой yarn run dev-nuxt, который я изменил в моем package.json (упрощенно | показывает только то, что мне нужно | я был бы рад показать больше по запросу) 

    {
    "private": true,
    "scripts": {
        "dev-nuxt": "nuxt",
    },

До этого у меня был yarn run dev

"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

, который смотрел на webpack.mix.js.При запуске yarn run dev мой терминал будет возвращать эти ошибки: 

Module not found: Error: Can't resolve '~/components/Logo.vue' in 'C:\Users\Owner\Documents\META+LAB\iSTART\resources\pages'
 @ ./resources/pages/index.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/pages/index.vue?vue&type=script&lang=js&) 28:0-41 32:10-14
 @ ./resources/pages/index.vue?vue&type=script&lang=js&
 @ ./resources/pages/index.vue
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/assets/app.scss

Итак, я также понял, что мой webpack.mix.jsh не имеет ссылок на мой nuxt.config.js (упрощенно | показывает только то, что мне нужноto | я был бы рад показать больше по запросу) 

    const pkg = require('./package')
    const path = require('path');

    module.exports = {
      mode: 'spa',
      /*
      ** srcDir points to where nuxt will be compiled by yarn nuxt-dev
      */
      srcDir: 'resources/',
      /*
      ** buildDir is where my nuxt code will be compiled to 
      */
      buildDir: 'public/js/',

      ** Nuxt.js modules
      */
      modules: [,
        // Doc: https://bootstrap-vue.js.org/docs/
        'bootstrap-vue/nuxt',
        'nuxt-babel'
      ],

, который имеет ссылку на мой .babelrc, который должен компилировать мое значение в мой App.js (упрощенно | показывает только то, что я думаю, что янадо | я был бы рад показать больше по запросу) 

    {
      "env": {
        "test": {
          "presets": [
            [
              "@babel/preset-env",
              {
                "targets": {
                  "node": "current"
                }
              }
            ],
            "@nuxt/babel-preset-app"
          ]
        }
      }
    }

Так что я не уверен, почему я получаю эту ошибку.Возможно ли, что мой nuxt.config.js или .babelrc настроены неправильно?

Вот так выглядит мой welcome.blade.php: 

    <!doctype html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>Laravel</title>

            <!-- Fonts -->
            <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        </head>
        <body>
            <div id="app">
                 <index></index>
            </div>
            <script src="/js/App.js"></script>
        </body>
    </html>

При компиляции nuxt через yarn run dev-nuxt, как объявлено в моем package.json выше, я получаю порт, который показывает мой index.vueкомпонент отлично, однако у меня нет доступа к этому компоненту при запуске php artisan serve

У меня такое ощущение, что я что-то не настроил должным образом или мне нужно установить больше пакетов?

Для справки вот мое целое package.json

    "devDependencies": {
        "@vue/test-utils": "^1.0.0-beta.27",
        "axios": "^0.18",
        "babel-core": "7.0.0-bridge.0",
        "babel-jest": "^23.6.0",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jest": "^23.6.0",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "nodemon": "^1.18.9",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.6.2",
        "vue-jest": "^3.0.2"
    },
    "dependencies": {
        "@babel/core": "^7.2.2",
        "babel-loader": "^8.0.5",
        "bootstrap": "^4.1.3",
        "bootstrap-vue": "^2.0.0-rc.11",
        "cross-env": "^5.2.0",
        "node-sass": "^4.11.0",
        "nuxt": "^2.4.0",
        "vue-loader": "^15.6.2"
    }

1 Ответ

0 голосов
/ 15 февраля 2019

Я думаю на уровне html, вам все еще нужно инициализировать Vue на #app в теге скрипта ... потому что я не думаю, что Vue инициализируется, в основном: 

let app = new Vue({el : "#app'});
...