如何在本地文件系统中预览 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 文件来预览你的应用。