Question

我尝试将现有项目移至Vue，我已使用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功能：保存时的Lint
选择单元测试解决方案：Mocha
选择E2E测试解决方案：赛普拉斯
您更喜欢为Babel，PostCSS，ESLint等配置配置？在专用配置文件中
将此保存为未来项目的预设？否

这将生成以下项目结构：

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

现在，我遇到了以下问题：

在我的公司，我们倾向于安装与项目相关的所有工具作为项目的一部分而不是全局安装，在这种情况下，我无法找到告诉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，因为在评论中它说明了以下内容＆＃34; // @是/ src＆＃34;的别名但它并没有真正起作用，因为我得到了一个类似的错误：

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

我有以下问题：

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

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

Answer 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"),
            }
        }
    }
}

Vue-CLI v3固定项目结构

1 个答案: