Vue-CLI v3 opinionated project structure

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.

Eyal Alon Eyal Alon · Accepted Answer · 2018-06-09T22:10:33

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

Vue-CLI v3 opinionated project structure

1 Answers