vite-plugin-vue2-suffix's Introduction

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

npm i vite-plugin-vue2-suffix -D

Add it to vite.config.js

// vite.config.js
import { createVuePlugin } from "vite-plugin-vue2";
import VitePluginVue2Suffix from "vite-plugin-vue2-suffix";

export default {
  plugins: [createVuePlugin(), VitePluginVue2Suffix()],
};

That's all.

Situation 1

components using in another components

it will automatically turn this

<template>
  <div class="block">
    <ComponentA msg="this is a A component" />
    <router-view></router-view>
  </div>
</template>

<script>
import ComponentA from "./components/ComponentA";

export default {
  components: {
    ComponentA,
  },
};
</script>

into this

<template>
  <div class="block">
    <ComponentA msg="this is a A component" />
    <router-view></router-view>
  </div>
</template>

<script>
import ComponentA from "./components/ComponentA/index.vue";

/** or if your component is in a outside path  */
// import ComponentA from './components/ComponentA.vue'

export default {
  components: {
    ComponentA,
  },
};
</script>

Situation 2

components using in routes

also, it will turn this:

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

const routerMap = [
  {
    path: "/news",
    component: () => import("../components/News"),
  },
];

export default new Router({
  scrollBehavior: () => ({
    y: 0,
    x: 0,
  }),
  routes: routerMap,
});

into this below:

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

const routerMap = [
  {
    path: "/news",
    component: () => import("../components/News.vue"),
    /** or if your component is in a inside path */
    // component: () => import('../components/News/index.vue')
  },
];

export default new Router({
  scrollBehavior: () => ({
    y: 0,
    x: 0,
  }),
  routes: routerMap,
});

License

vite-plugin-vue2-suffix's People

Contributors

Stargazers

Watchers

vite-plugin-vue2-suffix's Issues

Cannot use import statement outside a module

version is "vite-plugin-vue2-suffix": "^1.0.4",
when i run "npm run vite", i got this:

[0] xxx\node_modules\vite-plugin-vue2-suffix\dist.js:1
[0] import fs from 'fs';
[0] ^^^^^^
[0]
[0] SyntaxError: Cannot use import statement outside a module

my vite.config.js:

import VitePluginVue2Suffix from "vite-plugin-vue2-suffix";
...
    plugins: [
        // 支持vue2
        createVuePlugin({
            jsx: true,
        }),
        VitePluginVue2Suffix(),
        copy(),
    ],