Vue-CLI v3 opinionated project structure - vue.js

Question

I'm trying to move existing project to Vue and I've used Vue-CLI 3 and installed it locally and then I've generated the project through the following command ./node_modules/.bin/vue create dashboard and I've used the following options:
Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
Use class-style component syntax? Yes
Use Babel alongside TypeScript for auto-detected polyfills? Yes
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
Pick a linter / formatter config: TSLint
Pick additional lint features: Lint on save
Pick a unit testing solution: Mocha
Pick a E2E testing solution: Cypress
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
Save this as a preset for future projects? No
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:
At my company we tend to install all tools that are related to the project as part of the project as opposed to global installs and in this case I couldn't find a way to tell Vue-CLI3 to generate the files directly at the .experiment directory so now we have two node_modules directories as opposed to one as you can see in the structure above.
Our current project structure is something like the following:
..\Web\<domain>\Src\Dashboard\
├── app
├── node_modules
├── package-lock.json
├── package.json
├── tests
├── tsconfig.json
└── tslint.json
And this is really important to us because we have things dependent on this structure so what I did is started to copy/paste things from the generated directory into the project to match our structure.
After I copied/pasted everything and ran npm run serve it started to complain and throws the following errors:
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
So I went to the node_modules directory and searched for ./src/main.ts I've found it in ..\Web\<domain>\Src\Dashboard\node_modules\#vue\cli-plugin-typescript\index.js and I have no clue how to configure it so what I did is change the default path of the module to ./app/main.ts and then I got the following error:
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
So I changed # to /app because in the comments it says the following
"// # is an alias to /src" but it doesn't really work because then I get a similar error:
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:
How can I generate a template in existing directory where a node_modules directory might exist using Vue-CLI v3?
How do I configure the entry point of Vue without messing with the modules themselves? e.g. I want to change ./src/main.ts to ./app/main.ts.
How do I change where # points to?
I read and found that something like vue.config.js exists but then I didn't really understand how to configure it to fit my needs.

Answer 1

I've solved all the issues I had by creating a vue.config.js file at the root of the project and then used the following configuration:
"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"),
}
}
}
}