Question

我正在Nuxt.js项目中与Laravel合作。我需要将它们结合在一起，因为在将它们安装到我的项目中时，它们都带有样板。

我几乎可以完成所有工作，直到需要welcome.blade.php才能读取在index.vue文件夹中创建的resources/nuxt/pages组件。 / p>

当前，我遇到的问题是我在导入vue的文件public/App.js的第1行上有一个“意外标识符”。

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.j没有引用我的nuxt.config.js（简体|仅显示了我认为需要的内容|我很乐意根据要求显示更多内容）

    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>

在上述yarn run dev-nuxt中通过package.json编译nuxt时，我得到一个完美显示我的index.vue组件的端口，但是在运行{时，我无权访问此组件{1}}

我感觉我没有正确配置某些东西，或者我需要安装更多软件包？

作为参考，这里是我的整个php artisan serve

package.json

Answer 1

我认为在html级别上，您仍然需要在脚本标签中的#app上初始化Vue ...因为基本上我不认为Vue已初始化

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

无法让我的“ welcome.blade.php”识别在Nuxt.js文件夹中导入的Vue的问题

1 个答案: