vite-plugin-vue2-suffix

it has been official inclued detail

A plugin solve missing '*.vue' suffix problem transform webpack to vite in vue2

Usage

Install

1npm i vite-plugin-vue2-suffix -D

Add it to vite.config.js

1// vite.config.js
2import { createVuePlugin } from "vite-plugin-vue2";
3import VitePluginVue2Suffix from "vite-plugin-vue2-suffix";
4
5export default {
6  plugins: [createVuePlugin(), VitePluginVue2Suffix()],
7};

That's all.

Situation 1

components using in another components

it will automatically turn this

1<template>
2  <div class="block">
3    <ComponentA msg="this is a A component" />
4    <router-view></router-view>
5  </div>
6</template>
7
8<script>
9import ComponentA from "./components/ComponentA";
10
11export default {
12  components: {
13    ComponentA,
14  },
15};
16</script>

into this

1<template>
2  <div class="block">
3    <ComponentA msg="this is a A component" />
4    <router-view></router-view>
5  </div>
6</template>
7
8<script>
9import ComponentA from "./components/ComponentA/index.vue";
10
11/** or if your component is in a outside path  */
12// import ComponentA from './components/ComponentA.vue'
13
14export default {
15  components: {
16    ComponentA,
17  },
18};
19</script>

Situation 2

components using in routes

also, it will turn this:

1import Vue from "vue";
2import Router from "vue-router";
3
4Vue.use(Router);
5
6const routerMap = [
7  {
8    path: "/news",
9    component: () => import("../components/News"),
10  },
11];
12
13export default new Router({
14  scrollBehavior: () => ({
15    y: 0,
16    x: 0,
17  }),
18  routes: routerMap,
19});

into this below:

1import Vue from "vue";
2import Router from "vue-router";
3
4Vue.use(Router);
5
6const routerMap = [
7  {
8    path: "/news",
9    component: () => import("../components/News.vue"),
10    /** or if your component is in a inside path */
11    // component: () => import('../components/News/index.vue')
12  },
13];
14
15export default new Router({
16  scrollBehavior: () => ({
17    y: 0,
18    x: 0,
19  }),
20  routes: routerMap,
21});

License

MIT License © 2021 williamyorkl