时间戳

首页 > 解决方案 > Vue-CLI v3 自以为是的项目结构

vue.js - Vue-CLI v3 自以为是的项目结构

问题描述

我正在尝试将现有项目移动到 Vue，我使用了 Vue-CLI 3 并将其安装在本地，然后我通过以下命令生成了项目，./node_modules/.bin/vue create dashboard并使用了以下选项：

这将生成以下项目结构：

..\Web\.experiment
├── dashboard
|  ├── babel.config.js
|  ├── cypress.json
|  ├── node_modules
|  ├── package-lock.json
|  ├── package.json
|  ├── public
|  |  ├── favicon.ico
|  |  ├── img
|  |  ├── index.html
|  |  └── manifest.json
|  ├── src
|  |  ├── App.vue
|  |  ├── assets
|  |  ├── components
|  |  ├── main.ts
|  |  ├── registerServiceWorker.ts
|  |  ├── router.ts
|  |  ├── shims-tsx.d.ts
|  |  ├── shims-vue.d.ts
|  |  ├── store.ts
|  |  └── views
|  ├── tests
|  |  ├── e2e
|  |  └── unit
|  ├── tsconfig.json
|  └── tslint.json
├── node_modules
├── package-lock.json
└── package.json

现在，我遇到以下问题：

  1. 在我的公司，我们倾向于将与项目相关的所有工具作为项目的一部分安装，而不是全局安装，在这种情况下，我找不到告诉 Vue-CLI3 直接在.experiment目录中生成文件的方法，所以现在我们有两个node_modules目录，而不是您在上面的结构中看到的一个目录。

    我们当前的项目结构如下：

    ..\Web\<domain>\Src\Dashboard\
├── app
├── node_modules
├── package-lock.json
├── package.json
├── tests
├── tsconfig.json
└── tslint.json

    这对我们来说非常重要，因为我们有依赖于这个结构的东西，所以我所做的就是开始将生成的目录中的东西复制/粘贴到项目中以匹配我们的结构。

  2. 在我复制/粘贴所有内容并运行后npm run serve，它开始抱怨并引发以下错误：

    ERROR  Failed to compile with 1 errors                                                                                                                                                                                            
17:00:23
This relative module was not found:

* ./src/main.ts in multi (webpack)-dev-server/client?/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

    所以我去了node_modules目录并搜索了./src/main.ts我已经找到它..\Web\<domain>\Src\Dashboard\node_modules\@vue\cli-plugin-typescript\index.js并且我不知道如何配置它所以我所做的就是将模块的默认路径更改为./app/main.ts然后我收到以下错误：

    ERROR  Failed to compile with 1 errors                                                                                                                                                                                            17:07:52
This dependency was not found:

* @/components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/vue-loader/lib??vue-loader-options!./app/views/Home.vue?vue&type=script&lang=ts

    所以我改为@因为/app在评论中它说以下“// @是/src的别名”但它并没有真正起作用，因为那时我得到了类似的错误：

    ERROR  Failed to compile with 1 errors                                                                                                                                                                                            17:37:33
This dependency was not found:

* /app/components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/vue-loader/lib??vue-loader-options!./app/views/Home.vue?vue&type=script&lang=ts

我有以下问题：

  1. 如何node_modules使用 Vue-CLI v3 在可能存在目录的现有目录中生成模板？

  2. 如何在不弄乱模块本身的情况下配置 Vue 的入口点？例如，我想更改./src/main.ts为./app/main.ts.

  3. 如何更改@指向的位置？

我阅读并发现vue.config.js存在类似的东西，但我并不真正了解如何配置它以满足我的需求。

标签： vue.js

解决方案

我已经通过vue.config.js在项目的根目录创建一个文件解决了我遇到的所有问题，然后使用了以下配置：

"use strict"
const path = require("path")

module.exports = {
    chainWebpack: config => {
        const app = config.entry("app");
        app.clear();
        app.add("./app/main.ts");
    },
    configureWebpack: {
        resolve: {
            alias: {
                "@": path.resolve("app"),
            }
        }
    }
}

推荐阅读