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

news/2024/11/14 13:57:13/

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


http://www.ppmy.cn/news/1546664.html

相关文章

Jmeter的安装,设置中文,解决乱码问题

1.Jmeter安装 1-Jmeter如何下载 1---我这里提供一个下载快的方式 https://www.123684.com/s/lWZKVv-4jiav?提取码:4x4y 2---Jmeter官网下载地址 Apache JMeter - Download Apache JMeter 2-配置java环境 1---下载javaJDK 官方下载地址 https://www.oracle.com/java/techno…

数据分析考试怎么考

数据分析在现代商业和学术领域变得越来越重要,为决策提供了坚实的基础。对于那些希望在这一领域发展职业生涯的人来说,通过专业认证来展示自己在数据分析方面的能力无疑是一个明智之举。在众多数据分析认证中,CDA(Certified Data …

从“大吼”到“轻触”,防爆手机如何改变危险油气环境通信?

众所周知,在加油站用手机打电话是被明令禁止的,这是因为手机内部会产生静电或射频火花,可能点燃空气中的油气混合物,导致爆炸或火灾。那么加油站的工作人员如何交流呢?以前他们靠吼,现在有了防爆手机&#…

20241108 “postinstall“: “electron-builder install-app-deps“ 導致無法正常下載依賴

在 package.json 中,"postinstall": "electron-builder install-app-deps" 的作用是: 作用说明 依赖安装:electron-builder install-app-deps 是 electron-builder 的一个命令,主要用于在安装依赖后自动安装…

学习threejs,使用导入的模型生成粒子

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.STLLoader STL模型加…

计算机毕业设计Hadoop+Spark高考推荐系统 高考分数线预测 知识图谱 高考数据分析可视化 高考大数据 大数据毕业设计 Hadoop 深度学习

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

LLM大模型微调入门Lora(LlamaFactory)

一、Llama Factory介绍 LLaMA-Factory 是一个开源框架,旨在简化大型语言模型的定制化微调流程。该框架整合了多样化的训练策略与监控工具,支持通过命令行界面(CLI)和网页用户界面(WebUI)等多种方式进行交互…

CCSK:面试云计算岗的高频问题

在竞争激烈的云计算岗位求职市场中,拥有 CCSK云计算安全知识认证无疑能为你增添强大的竞争力。而深入了解云计算面试中的高频问题并熟练掌握答案,更是迈向成功的关键一步。 一、AWS 相关问题 AWS 是重要考点,常被问到其关键特性&#xff0c…