vue+vite多页应用配置及页面路径更改

Monday1997
13,383 阅读2分钟

最近一个项目是用vue+vite进行开发的多页应用,此次主要和大家分享一下vite配置，导出目录,目录优化,其他出来

主要目录如下

image-20210906183428139.png

src下有一个index和一个detail文件夹，分别存在给自的html页面，html页面内容就和默认创建时一样。

基本就是将单页应用src中的html，app.vue，main.js等再复制一遍，原则上相当于直接创建两个单页项目吧。

vite配置

vite配置如下：

主要就是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`,
        },
      ],
    }),
  ]
})

然后运行项目，发现直接输入http://localhost:3000/是访问不到项目资源的

需输入http://localhost:3000/src/index/index.html

想直接输入地址http://localhost:3000/访问则需要配置一下root，此次主要是针对导出目录及编写脚本改变目录，root这块不做过多累述，有兴趣的朋友可以看下这位博主的文章

导出目录

若不做处理直接导出，则目录如下

image-20210906185155452.png

若将项目上线，则需要用如下方式访问页面

https://相关域名/src/index/index.html

或

https://相关域名/src/detail/index.html

苍天啊！！！想死的心都有了系不系！！！真的是恶心

这种页面也可以访问，可我要的是这样的

https://相关域名/index.html

https://相关域名/detail.html

之前没做过多页面配置，而且用的基本都是webpack，没怎么用过rollup，所以感觉是用相关配置可以直接更改这个路径的。可找了大半天基本无果（所以不努力找找，怎么知道自己在白费功夫呢），所以打算自己用node写个脚本对其进行优化

目录优化

在vite.config.js同级目录创建move_html.js

此次脚本的目的是希望打包出来的dist文件夹目录结构能发生如下变化

基本思路就是将

image-20210906190000523.png dist/src/detail/index.html和dist/src/index/index.html两个文件拷贝到dist目录，接着删除src目录

接下来就一步到位

// 移动html脚本
const fs = require('fs')
// 查看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})

额。。虽然代码简短，还是给没用过node的小伙伴简单解释下吧

  • fs.readdirSync('./dist/src')这条语句会返回一个'dist/src'下的目录数组，像咱们这个目录则是输出如下结果[ 'detail', 'index' ]

  • 循环之后利用copyFileSync将数组拷贝出来到指定位置，第一个参数是资源位置，第二个参数是目标位置

  • 最后调用fs.rmdirSync删除'dist/src的所有目录'

最后在package.json文件中配置一下

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

此时执行npm run build即可完成理想的打包情况了

简单的事例已经放在git上了，github.com/windeyes/so… a.js就可以看到效果

其他处理

在页面开发中若需要从index页面跳转到detail页面时可以设置一个url，然后window.open调用

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

但是这样发布上线会有问题，以为我们已经将两个文件移到同一个目录了，此时需要借助process.env.NODE_ENV进行处理，为production时即为生产环境，否则为开发环境

故

const baseurl = process.env.NODE_ENV==='production'?`./detail.html: `../detail/index.html`
window.open(url,'_self')
avatar
文章
阅读
粉丝