综合编程

Renaming src Folder of a Vue CLI 3 Project

微信扫一扫,分享到朋友圈

Renaming src Folder of a Vue CLI 3 Project
0

The challenge of designing a good CLI tool is to balance sensible defaults with the freedom to customize.

One of the best CLI tools I know of is Vue CLI 3. One of its "sensible defaults" is that the source files, e.g. uncompiled components and JavaScript files, will be in a directory called src
.

But what if you have your own unique app structures you want to use like MVC, or perhaps your own convention you use across all your code bases, so you’d prefer to give the source folder a different name like view
, app
, client
etc.

In this GitHub issue
, a user asked how src
can be renamed to something else.

The answer is that this is not something that can be done directly. As Evan said in his closing comment in the issue:

"There will not be a first-class option for this because we prefer all Vue CLI projects to have a consistent, standard directory structure. Using a different directory name is only a matter of personal taste, so if you insist on changing that, you are on your own."

Let Sleeping Dogs Lie?

So why mess with this? It’s just a folder name, does it matter?

This was the question I had to ask myself when drafting my course, which is centered around creating a full-stack Vue/Express app including Vue CLI 3. This app is structured such that it includes server/API files in a subfolder of the scaffold.

I discuss my thoughts about using Vue CLI 3 to house a full-stack app in this previous post: Vue CLI 3 Full-Stack App Structure

As a staunch individualist and a hopeless perfectionist, I found I just couldn’t leave the client source files in the generically named src
folder while the server source files were in the more descriptively named server
folder.

Changing the name of src
can be done if you really believe the integrity of your folder structure is worth the difficulty it incurs, which I’ll explain below.

Webpack Config

The main issue you’ll butt up against is that the Webpack config under the hood of Vue CLI 3 has hardcoded src
as the name of the source directory.

Webpack config is opaque in Vue CLI 3 by design, but if you do need to see it, you can use the inspect
command.

My tip is to write it to a file and search for usages of src
.

$ vue inspect > webpack.txt

In a typical Vue CLI installation, you’ll see two instances of src
, one in the alias section, and one in the entry file.

webpack.txt

{
...
  resolve: {
    alias: {
      '@': '/home/vagrant/app/src',
      ...
    },
    ...
  },
  ...
  entry: {
    app: [
      './src/main.js'
    ]
  }
}

To change these, you’ll need to create or add to the Vue config file and override this Webpack config. I like using the Webpack Chain
method to do this declaratively.

The following show how you could override the rules that hardcode the src
directory and change them to something else:

vue.config.js

const path = require("path");

module.exports = {
  chainWebpack: config => {
    config
      .entry("app")
      .clear()
      .add("./client/main.js")
      .end();
    config.resolve.alias
      .set("@", path.join(__dirname, "./client"))
  }
};

With that done, inspecting the Webpack config again you will see src
has been replaced:

webpack.txt

{
...
  resolve: {
    alias: {
      '@': '/home/vagrant/app/client',
      ...
    },
    ...
  },
  ...
  entry: {
    app: [
      './client/main.js'
    ]
  }
}

Problem solved…or is it? Keep in mind that Vue CLI 3 plugins will all assume src
is the main folder, so be prepared to keep modifying the config in a similar way each time you add a plugin.

Do you want to learn how to build fully-tested, production-ready Vue applications that are suitable for commercial purposes? Join the pre-sale of my upcoming Enterprise Vue
course!

阅读原文...


微信扫一扫,分享到朋友圈

Renaming src Folder of a Vue CLI 3 Project
0

DZone

5 Benefits of Parallel Testing

上一篇

戴上 VR,从医院逃亡

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Renaming src Folder of a Vue CLI 3 Project

长按储存图像,分享给朋友