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

Question

我想从根文件夹开始导入，而不是向下导入几个文件夹。 我该怎么做？

我在尝试为我的主页导入留言簿(如 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>

我的留言簿.vue

<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('.')
}
}
};

编辑.neutrinorc也没有.js

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

Answer 1

我错过了整个 babel 插件的事情。

yarn add babel-plugin-root-import -dev

.babelrc

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

我无法让别名解析工作，但这似乎确实有效。