使用 CLI 服务的 Vue 相对路径

Question

遇到一个肯定与 Webpack 相关的问题。

尝试在 CLI 创建的 Vue 应用程序中将最基本的服务作为冒烟测试（从小处开始）。

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

我在项目的src 文件夹中创建了一个名为shared 的文件夹。 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 PM 未找到此相关模块：

• ../共享在 ./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";