Vue-CLI v3自以为是的项目结构-Java 学习之路

我'm trying to move existing project to Vue and I'已使用Vue-CLI 3并在本地安装它然后我通过以下命令生成项目 ./node_modules/.bin/vue create dashboard 并且我使用了以下选项：

检查项目所需的功能：Babel，TS，PWA，路由器，Vuex，CSS预处理器，Linter，Unit，E2E
使用类样式的组件语法？是
使用Babel和TypeScript进行自动检测的polyfill？是
选择CSS预处理器（默认支持PostCSS，Autoprefixer和CSS模块）：SCSS / SASS
选择linter / formatter配置：TSLint
选择其他lint功能：保存时提示
选择单元测试解决方案：摩卡
选择E2E测试解决方案：赛普拉斯
你喜欢在哪里为Babel，PostCSS，ESLint等配置？在专用配置文件中
将此保存为未来项目的预设？没有

This will generate the following project structure:

..\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

Now, I'm having the following issues:

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

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

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

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

复制/粘贴所有内容并运行 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 因为在评论中它说下面的"// @ is an alias to /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

And I have the following questions:

如何在使用Vue-CLI v3存在 node_modules 目录的现有目录中生成模板？
如何在不弄乱模块本身的情况下配置Vue的入口点？例如我想将 ./src/main.ts 更改为 ./app/main.ts .
如何更改 @ 指向的位置？

我读了，发现像 vue.config.js 之类的东西存在，但后来我真的不明白如何配置它以满足我的需要 .

1 回答

我已经通过在项目的根目录创建 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"),
            }
        }
    }
}

回复于 2024-05-10T09:18:25+08:00

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

1 回答

相关问题