feat: add vite-plugin-html-template

Author: IndexXuan

CHANGELOG.md

@@ -1,3 +1,18 @@
+<a name="1.0.0-rc.0"></a>
+# [1.0.0-rc.0](https://github.com/IndexXuan/vue-cli-plugin-vite/compare/v0.4.4...v1.0.0-rc.0) (2021-04-07)
+
+
+### Features
+
+* add vite-plugin-html-template ([b7f0917](https://github.com/IndexXuan/vue-cli-plugin-vite/commit/b7f0917))
+
+
+
+<a name="0.4.4"></a>
+## [0.4.4](https://github.com/IndexXuan/vue-cli-plugin-vite/compare/v0.4.3...v0.4.4) (2021-04-06)
+
+
+
 <a name="0.4.4"></a>
 ## [0.4.4](https://github.com/IndexXuan/vue-cli-plugin-vite/compare/v0.4.3...v0.4.4) (2021-04-06)
 

README.md

@@ -75,7 +75,6 @@ vue add vite
 # NOTE you cannot directly use `vite` or `npx vite` since it is origin vite not this plugin.
 yarn vite // or npm run vite
 ```
-the plugin\'s generator will write some `main.html` for corresponding main.{js,ts}, since vite need html file for dev-server entry file
 
 
 ## Motivation
@@ -127,12 +126,10 @@ the plugin\'s generator will write some `main.html` for corresponding main.{js,t
 
 ### Compatibility
 - **NO EXTRA** files, code and dependencies injected
-    - injected corresponding main.html
-        - SPA: `projectRoot/main.html`
-        - MPA: `projectRoot/src/pages/*/main.html`(s)
     - injected one devDependency `vue-cli-plugin-vite`
     - injected one line code in `package.json#scripts#vite` and one file at `bin/vite`
 - auto-resolved as much options as we can from `vue.config.js` (publicPath, alias, outputDir...)
+- auto reuse public/index.html as vite html entry template
 - compatible the differences between vue-cli and vite(environment variables, special syntax...)
 
 
@@ -255,6 +252,7 @@ $--font-path: '~element-plus/lib/theme-chalk/fonts'; // changed to 'path/to/node
 ## Relevant Vite Plugins
 - [vite-plugin-vue2@underfin](https://github.com/underfin/vite-plugin-vue2)
 - [vite-plugin-env-compatible](https://github.com/IndexXuan/vite-plugin-env-compatible)
+- [vite-plugin-html-template](https://github.com/IndexXuan/vite-plugin-html-template)
 - [vite-plugin-vue-cli](https://github.com/IndexXuan/vite-plugin-vue-cli)
 - [vite-plugin-mpa](https://github.com/IndexXuan/vite-plugin-mpa)
 

config/index.ts

@@ -1,9 +1,11 @@
 import { defineConfig } from 'vite'
 import { createVuePlugin } from 'vite-plugin-vue2'
 import envCompatible from 'vite-plugin-env-compatible'
+import htmlTemplate from 'vite-plugin-html-template'
 import vueCli, { VueCliOptions } from 'vite-plugin-vue-cli'
 import mpa from 'vite-plugin-mpa'
 import path from 'path'
+import chalk from 'chalk'
 import { Options } from './options'
 import { name } from '../package.json'
 
@@ -14,6 +16,7 @@ let vueConfig: VueCliOptions = {}
 try {
   vueConfig = require(resolve('vue.config.js')) || {}
 } catch (e) {
+  console.error(chalk.redBright(e))
   /**/
 }
 
@@ -23,7 +26,7 @@ const extraPlugins = viteOptions.plugins || []
 
 if (viteOptions.alias) {
   console.log(
-    `[${name}]: pluginOptions.vite.alias is deprecated, will auto-resolve from chainWebpack / configureWebpack`,
+    chalk.cyan(`[${name}]: pluginOptions.vite.alias is deprecated, will auto-resolve from chainWebpack / configureWebpack`),
   )
 }
 
@@ -33,13 +36,11 @@ const useMPA = Boolean(vueConfig.pages)
 export default defineConfig({
   plugins: [
     envCompatible(),
+    htmlTemplate({ mpa: useMPA }),
     vueCli(),
     createVuePlugin(viteOptions.vitePluginVue2Options),
     useMPA
-      ? mpa({
-          // special use main.html for vue-cli
-          filename: 'main.html',
-        })
+      ? mpa()
       : undefined,
     ...extraPlugins,
   ],

examples/my-mpa-ts-app/src/pages/index/main.html

@@ -1,4 +1,4 @@
-const { writeHtmlFromPublic, writeMainDotHtml4EachEntry } = require('../lib/utils')
+const pkgJson = require('../package.json')
 
 module.exports = (api, options = {}) => {
   // 1. extend package
@@ -10,16 +10,10 @@ module.exports = (api, options = {}) => {
   api.extendPackage(pkg)
 
   // 2. render template
-  api.render('./template')
+  api.render('./template', { pkgName: pkgJson.name })
 
   // 3. logger
   api.onCreateComplete(() => {
-    const root = api.resolve('.')
-    if (options.htmlInitMethod === 'vue-cli') {
-      writeHtmlFromPublic(root)
-    } else {
-      writeMainDotHtml4EachEntry(root)
-    }
     api.exitLog('use vite for development by `yarn vite`', 'info')
   })
 }

examples/my-mpa-ts-app/src/pages/subpage/main.html

@@ -2,7 +2,7 @@
 
 const path = require('path')
 const { spawn } = require('child_process')
-const configPath = require.resolve('vue-cli-plugin-vite/config/index.ts')
+const configPath = require.resolve('<%- pkgName %>/config/index.ts')
 const cwd = path.resolve(__dirname, '../')
 
 const params = [

examples/my-spa-js-app/index.html

@@ -23,13 +23,15 @@
     "url": "https://github.com/IndexXuan/vue-cli-plugin-vite/issues"
   },
   "keywords": [
+    "vite-plguin",
     "vue-cli-plugin",
     "vite"
   ],
   "dependencies": {
     "chalk": "4.1.0",
     "vite": "2.1.5",
     "vite-plugin-env-compatible": "0.2.1",
+    "vite-plugin-html-template": "0.1.0",
     "vite-plugin-mpa": "0.3.1",
     "vite-plugin-vue-cli": "0.7.1",
     "vite-plugin-vue2": "1.4.3"