如何在本地文件系统中预览 Vue 项目？

要在本地文件系统中直接预览 Vue 项目，你需要确保打包后的 dist 文件夹中的资源能够正确加载。这里有几个步骤可以帮助你实现这一点：

1. 配置 vue.config.js

确保在 vue.config.js 中设置 publicPath 为 ‘./’。这会让所有的资源路径相对于当前目录，从而在本地文件系统中能够正确加载。

// vue.config.js
module.exports = {publicPath: './',  // 相对于当前目录outputDir: 'dist', // 输出目录assetsDir: 'static', // 静态资源目录// 其他配置...
};

2. 配置路由模式为 hash

在 router/index.js 中，确保路由模式设置为 hash。这样，即使在本地文件系统中，路由也能正常工作，因为 hash 模式不会触发浏览器向服务器发送新请求。

import Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);const routes = [// 你的路由配置{ path: '/', component: Home },{ path: '/about', component: About },// ...其他路由
];const router = new VueRouter({mode: 'hash',  // 使用 hash 模式base: process.env.BASE_URL,routes
});export default router;

打包、预览

npm run build

打包完成后，你可以在本地文件系统中直接双击打开 dist 文件夹中的 index.html 文件来预览你的应用。