A recent project is a multi-page application developed with Vue + Vite. This time, I mainly share with you the configuration of Vite, export directory, directory optimization, and other things

The main directories are as follows

SRC has an index folder and a detail folder, respectively, for your HTML page, which is created with the same content as the default.

This is basically a copy of the HTML, app.vue, main.js, etc. from the single page application SRC. In principle, it is equivalent to creating two single page projects directly.

Vite configuration

Vite configuration is as follows:

The main thing is to set the input

import vue from "@vitejs/plugin-vue"
import styleImport from "vite-plugin-style-import"
import { defineConfig } from "vite"
const path = require("path")

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname,'./src'),}},base:
  // https://quick.39.net/service/hospitalrank
    process.env.NODE_ENV === "production"? ". /": "".build: {
    assetsDir: "./assets".rollupOptions: {
      input: {
        rank: path.resolve(__dirname, "src/index/index.html"),
        detail: path.resolve(__dirname, "src/detail/index.html"),}}},plugins: [
    vue(),
    styleImport({
      libs: [{libraryName: "vant".esModule: true.resolveStyle: (name) = > `vant/es/${name}/style`,},],}),]})Copy the code

Then run the project and find that you cannot access the project resources by typing http://localhost:3000/ directly

Need to enter http://localhost:3000/src/index/index.html

If you want to directly enter the address http://localhost:3000/, you need to configure the root, this is mainly for the export directory and script to change the directory, root does not do too much, interested friends can look at the blogger’s article

Export directory

If you do not export the file, the directory is as follows

To put the project online, you need to access the page in the following way

https:// Related domain name/SRC /index/index.html

or

https:// Related domain name/SRC /detail/index.html

My God!! Want to die of the heart have not tied!! It’s really disgusting.

This page is also accessible, but this is what I want

https:// Related domain name /index.html

https:// Related domain name /detail.html

I haven’t done much page configuration before, and I mostly use Webpack, and I haven’t used rollup much, so I feel like I can change this path directly with relevant configuration. So I decided to use Node to write a script to optimize it

Directory to optimize

Create move_html.js in the same directory as viet.config. js

The purpose of this script is to make the following changes to the packaged dist folder directory structure

The basic idea is to

dist/src/detail/index.htmlanddist/src/index/index.htmlCopy two files todistDirectory, and then deletesrcdirectory

And then it’s all in one step

// Move the HTML script
const fs = require('fs')
// View all directories under SRC
const dirNames = fs.readdirSync('./dist/src')
// copy
for(let i = 0; i < dirNames.length; i++){ fs.copyFileSync(`./dist/src/${dirNames[i]}/index.html`.`./dist/${dirNames[i]}.html`)
}
fs.rmdirSync('./dist/src', {recursive:true})

Copy the code

The forehead.. Although the code is short, let’s explain it briefly to those who have never used Node before

  • The fs.readdirSync(‘./dist/ SRC ‘) statement returns an array of directories under ‘dist/ SRC ‘, such as the following: [‘detail’, ‘index’]

  • After the loop, use copyFileSync to copy the array to the specified location, the first parameter is the resource location, the second parameter is the destination location

  • Finally, call fs.rmdirsync to delete ‘all directories dist/ SRC’

Finally, configure it in package.json

"scripts": {
    "dev": "vite"."build": "vite build && node move_html.js"."serve": "vite preview"
  },
Copy the code

At this point, NPM run build completes the ideal packaging situation

Simple examples are already available on git, github.com/windeyes/so… A. js can see the effect

Other processing

If you want to jump from the index page to the detail page during page development, you can set a URL and call window.open

const url = '.. /detail/index.html'
window.open(url,'_self')
Copy the code

NODE_ENV (production environment, otherwise development environment); process. Env.node_env

Therefore,

const baseurl = process.env.NODE_ENV==='production'?`./detail.html: `../detail/index.html`
window.open(url,'_self')
Copy the code