Question

遇到肯定与Webpack有关的问题。

试图在CLI创建的Vue应用程序中进行最基本的服务作为冒烟测试（从小处着手）。

版本：
Vue CLI：3.11.0
vue 2.6.10
@ vue / CLI-Service 4.0.5

我在项目的shared文件夹内创建了一个名为src的文件夹。 HelloWorld.vue文件位于components文件夹中。在该文件中，我导入了放置在shared内的数据服务，并试图在HelloWorld组件的Created事件中使用它：

<script>
    import { dataService } from "../shared";

    export default {
      name: "HelloWorld",
      props: {
        msg: String
      },
      created() {
        dataService.addWebSite();
      }
    };
</script>

数据服务非常简单，仅用于访问API（data.service.js）：

import *  as axios from 'axios';

const addWebSite = function () {

    axios({
        method: 'POST',
        url: 'https://localhost:44362/WebSites/CreateWebSite',
        data: {
            name: "Pluralsight",
            url: "http://Pluralsight.com"
        }
    }).then((response) => {
        var discard = response.data;
        return discard;
    });
};

export const dataService = {
    addWebSite: addWebSite
};

执行npm run serve时，看到以下错误消息：

ERROR编译失败，出现1个错误，下午6:13:39 找不到此相对模块：

.././ node_modules / cache-loader / dist / cjs.js中共享-ref--12-0！./ node_modules / babel-loader / lib！./ node_modules / cache-loader / dist / cjs.js ?? ref--0-0！./ node_modules / vue-loader / lib ?? vue-loader-options！./ src / components / HelloWorld.vue？vue＆type = script＆lang = js＆

我猜想这是Webpack的相对路径，但是很茫然，无法使用Google来解决。

vue.config.js如下所示：

module.exports = {
    configureWebpack: {
        devtool: 'source-map',
    }
};

并且我尝试为导出的对象添加一个{./'和'/'的publicPath属性。

任何人都知道发生了什么事吗？

Answer 1

当您尝试从文件夹而不是文件导入时，就像这样

import { dataService } from "../shared";

这意味着您实际上要从"../shared/index.(any_supported_extension)"导入。但是，由于您的文件实际上名为data.service.js，因此您必须将导入更改为

import { dataService } from "../shared/data.service.js";

CLI服务的Vue相对路径

1 个答案: