代码之家 › 专栏 › 技术社区 › Folaht

Neutrinojs/vue项目:从根文件夹导入vue文件/模板

neutrino import vue.js webpack node.js

Folaht · 技术社区 · 6 年前

我想从根文件夹开始导入,而不是向下导入几个文件夹。

我遇到这个问题时,试图为我的主页导入一个留言簿(就像1999年)脚本。

import MyGuestbook from '../../components/MyGuestbook.vue' 编译。

import MyGuestbook from '/src/components/MyGuestbook.vue'

import MyGuestbook from '@/components/MyGuestbook.vue' 也不是。

客房预订.vue

<template>
<div>
    <MyGuestbook />
</div>
</template>

<script>
import MyGuestbook from '../../components/MyGuestbook.vue'

export default {
  name: 'GuestbookPage',
  components: {
    MyGuestbook
  }
};
</script>

<template>
  </div>
  </div>
</template>

<script src="non-editable-comments-v0.1.0.js"></script>
<script>
  window.safeComments('CommentTitle', 'CommentTargetID');

  export default {
    name: 'MyGuestbook'
  };
</script>

[更新]

我知道我需要使用webpack,但是我的项目将neutrinojs/vue(推荐用于该类型的项目)与webpack结合使用。我对他们两个都不熟悉。到目前为止 webpack.config.js文件

webpack.config.js文件

module.exports = {
  resolve: {
    extensions: [
      '.js', '.vue', '.json'
    ],
    alias: {
      '@': resolve('src'),
      '@root': resolve('.')
    }
  }
};

编辑也没有 .中微子

module.exports = {
  use: [
    '@neutrinojs/standardjs',
    [
      '@neutrinojs/vue',
      {
        html: {
          title: 'MySite'
        }
      }
    ],
    '@neutrinojs/jest',
    (neutrino) => {
      neutrino.config.resolve.extensions
        .add('.js')
        .add('.json')
        .add('.vue');

      neutrino.config.resolve.alias
      .set('@', 'src')
      .set('@root', '.');
    }
  ]
};

错误:

ERROR in ./node_modules/@neutrinojs/compile-loader/node_modules/babel-loader/lib?{"cacheDirectory":true,
"plugins":[["/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/fast-async/plugin.js",
{"spec":true}],
"/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js",
"/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js"],
"presets":[["/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-preset-env/lib/index.js",
{"debug":false,"modules":false,
"useBuiltIns":true,"exclude":["transform-regenerator",
"transform-async-to-generator"],
"targets":{"browsers":[
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Edge versions",
"last 2 Opera versions",
"last 2 Safari versions",
"last 2 iOS versions"]}}]]}!.
/node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/docs/7.forum/GuestbookPage.vue
Module not found: Error: Can't resolve '@/components/YroGuestbook.vue' in '/home/folatt/Cloud/workspace/atom/Sites/MySite/src/docs/7.forum'
 @ ./node_modules/@neutrinojs/compile-loader/node_modules/babel-loader/lib?{"cacheDirectory":true,
"plugins":[["/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/fast-async/plugin.js",
{"spec":true}],
"/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js",
"/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js"],
"presets":[["/home/folatt/Cloud/workspace/atom/Sites/MySite/node_modules/babel-preset-env/lib/index.js",
{"debug":false,"modules":false,"useBuiltIns":true,
"exclude":["transform-regenerator","transform-async-to-generator"],
"targets":{"browsers":["last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Edge versions",
"last 2 Opera versions",
"last 2 Safari versions",
"last 2 iOS versions"]}}]]}!.
/node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/docs/7.forum/GuestbookPage.vue 8:0-57
 @ ./src/docs/7.forum/GuestbookPage.vue
 @ ./src/router/index.js
 @ ./src/index.js
 @ multi ./node_modules/webpack-dev-server/client?http://localhost:5000 ./node_modules/@neutrinojs/web/node_modules/webpack/hot/dev-server.js ./src/index

1 回复 | 直到 6 年前

Folaht 6 年前

我错过了巴贝尔插件的事。

yarn add babel-plugin-root-import -dev

巴贝尔

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "src",
      "rootPathPrefix": "@"
    }]
  ]
}

做似乎有用。