使用 CLI 服务的 Vue 相对路径

Posted 2023-02-22

【中文标题】使用 CLI 服务的 Vue 相对路径

【英文标题】：Vue Relative Paths with the CLI Service

【发布时间】：2020-03-15 21:23:34

【问题描述】：

遇到一个肯定与 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 属性添加到该导出对象。

有人知道怎么回事吗？

【参考方案1】：

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

import  dataService  from "../shared";

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

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

【讨论】：

当然。谢谢。我之前确实尝试过，但这次成功了。这是完全有意义的，因为我要介绍的示例有一个索引文件，该文件从文件夹中的每个服务中导出内容。谢谢。