dirs: "./src/views",//指定生成路由的目录
extensions: ["vue"],//文件后缀
exclude: ["**/src/*.vue"],//可以排除指定目录
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
//router.ts
import { createRouter, createWebHistory } from "vue-router";
// @ts-ignore
import routes from "~pages";
console.log(routes);
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
path: "/",
name: "home",
redirect: { name: routes[0].name },
children: [...routes],
export default router;
路由传参写法
生成的路由长这样：
{name: 'test-id', path: '/test/:id', props: true, component: ƒ}
$ npm install -D
vite
-plugin-pages
添加到您的
vite
.config.js ：
import Vue from '@
vite
js/plugin-vue' ;
import Pages from '
vite
-plugin-pages' ;
export default {
plugins : [ Vue ( ) , Pages ( ) ] ,
默认情况下，页面是从src/pages
目录
中的.vue或.js
文件
导出的Vue组件。
您可以通过在应用程序中导入virtual:generated-pages模块来访问
生成
的
路
由。
import { createRouter } from 'vue-router' ;
import routes from 'v
简单记录一下，昨儿研究vue3+
vite
没有找到现成的
自动
路
由的方案，遂上github上寻找了一些开源
项目
，借鉴一下人家的写法，很简单，使用
import.meta.glob
但是这个方法有点严格
import.meta.globEager跟import.meta.glob都无法往子
文件
夹继续查找
文件
之前的require.context都是可以的
贴下代码吧
// 引入 router
import { createRouter, createWebHistory } from 'vue-rou
之前开发移动端常用的rem布局，或使用媒体查询，本文研究一下postcss-px-to-viewport的使用现在有了更好用的vw vhvw 视口的最大宽度，1vw等于视口宽度的百分之一vh 视口的最大高度，1vh等于视口高度的百分之一1、创建vue
项目
2、安装postcss-px-to-viewport 依赖
3、因为
vite
中已经内联了postcss，所以并不需要额外的创建 postcss.config.js
文件
只需要在
vite
.config.ts配置postcss即可
vite
.config.
可以通过在 `vue.config.js` 中配置 `outputDir` 和 `indexPath` 来
指定
HTML 输出
路
径。
首先，在
项目
根
目录
下创建一个名为 `vue.config.js` 的
文件
，如果已经存在则在其中添加如下配置：
```js
module.exports = {
outputDir: 'dist', // 打包输出
目录
indexPath: 'my-custom-index.html' // HTML 输出
路
径，相对于 outputDir
这里的 `outputDir` 是打包输出
目录
，可以根据需要自定义。而 `indexPath` 则是 HTML 输出
路
径，需要
指定
为相对于 `outputDir` 的相对
路
径。在这个例子中，HTML
文件
将会输出到 `dist/my-custom-index.html`。
完成配置后，执行 `npm run build` 命令即可进行打包，HTML
文件
会输出到
指定
的
路
径。
