vue项目npm run build 打包之后如何在本地访问

vue项目npm run build 打包之后如何在本地访问

如果直接访问时,则会报错如下的信息:
报错码:

Access to script at 'file:///D:/assets/index-DDVBfHVo.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
index-DDVBfHVo.js:1 Failed to load resource: net::ERR_FAILED
index.html:1 Access to CSS stylesheet at 'file:///D:/assets/index-DCsNNTuD.css' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
index-DCsNNTuD.css:1 Failed to load resource: net::ERR_FAILED
/D:/favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

在这里插入图片描述
本地访问的解决方案:
打包后不能直接打开访问,需要启一个服务,通过服务来访问,具体操作过程如下:
1、安装serve(在cmd命令行输入)
npm i -g serve

2、打包项目
npm run build 生成dist文件夹

3、本地访问(在dist文件夹内)
serve dist
如图所示:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/650829.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

书籍推推荐之二--《生命的色彩》

史钧《生命的色彩》 在生活中,我们会注意到一个有趣的现象:每个人的头发颜色各不相同,有黑色、灰色、黄色、棕红色、银白色等,但就是没有绿色。对于生活在丛林中的早期人类来说,绿色的头发简直就是天然的迷彩服&#x…

华为Pura 70系列,一种关于世界之美的可能

1874年,莫奈创作了《印象日出》的油画,在艺术界掀起了一场革命。当时的主流艺术,是追求细节写实,追求场面宏大的学院派。他们称莫奈等人是“印象派”,认为莫奈的画追求光影表达,追求描绘抽象的意境&#xf…

Leetcode算法训练日记 | day37

专题九 贪心算法 一、单调递增的数字 1.题目 Leetcode&#xff1a;第 738 题 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。…

ProTable/EditableProTable修改表单保存后刷新界面数据不更新

1.背景 大坑。编辑表格保存后&#xff0c;接口拿到最新表格数据&#xff0c;但是界面没有刷新。本以为是加个id给表格就能刷新的&#xff0c;没想到需要重置表单。 2.解决 表格数据变更后需要重置表单 form.resetFields() <ProTablecolumns{columns}rowKey"id"…

面试:finalize

一、概述 将资源释放和清理放在finalize方法中非常不好&#xff0c;非常影响性能&#xff0c;严重时甚至会引起OOM&#xff08;Out Of Memory&#xff09;&#xff0c;从Java9开始就被标注为Deprecated&#xff0c;不建议被使用了。 二、两个重要的队列 1、unfinalized 队列 当…

React Router 6 + Ant Design:构建基于角色的动态路由和菜单

要根据用户的角色生成不同的路由菜单并实现权限控制,你可以采取以下步骤: 定义路由配置 首先,你需要定义一个包含所有可能路由的配置文件,例如: const routes [{path: /dashboard,element: <DashboardPage />,roles: [admin, manager, user]},{path: /users,element:…

Python 网络与并发编程(四)

文章目录 协程Coroutines协程的核心(控制流的让出和恢复)协程和多线程比较协程的优点协程的缺点 asyncio实现协程(重点) 协程Coroutines 协程&#xff0c;全称是“协同程序”&#xff0c;用来实现任务协作。是一种在线程中&#xff0c;比线程更加轻量级的存在&#xff0c;由程…

数据库并发控制思维导图+大纲笔记

思维导图 大纲笔记 多用户数据库系统 定义 允许多个用户同时使用的数据库系统特点 在同一时刻并发运行的事务数可达数百上千个多事务执行方式 事务串行执行交叉并发方式 单处理机系统同时并发方式 多处理机系统事务并发执行带来的问题 产生多个事务同时存取同一数据的情况可能…

自养号测评详解:成功助力亚马逊爆款必备手册

对于亚马逊商家而言&#xff0c;如何成功打造爆款产品无疑是他们日常运营中最为关注的核心议题。然而&#xff0c;尽管众多商家费尽心思去挑选和推广产品&#xff0c;但有时候却仍然难以选出真正的爆款。这不禁让人深思&#xff0c;究竟是什么原因导致商家在选品过程中屡屡碰壁…

微信小程序使用 Vant Weapp 中 Collapse 折叠面板 的问题!

需求&#xff1a;结合Tab 标签页 和 Collapse 折叠面板 组合成显示课本和章节内容&#xff0c;并且用户体验要好点&#xff01; 如下图展示&#xff1a; 问题&#xff1a;如何使用Collapse 折叠面板 将内容循环展示出来&#xff1f; js中的数据是这样的 代码实现&#xff1…

基于深度学习的实时人脸检测与情绪分类

情绪分类 实时人脸检测与情绪分类 Kaggle Competion 数据集 fer2013 中的测试准确率为 66%CK数据集的检验准确率为99.87%情绪分类器模型预测从网络摄像头捕获的实时视频中的平均成本时间为 4~ 10ms 关键技术要点&#xff1a; 实时人脸检测&#xff1a;系统采用了前沿的人脸检…

go语言并发实战——日志收集系统(九) 基于etcd的代码重构思考与初步实现

前言 在之前我们j基于sarama,tail还有go-ini实现了日志收集系统客户端的编写&#xff0c;但是我们梳理一下可以发现&#xff0c;该客户端还存在一些问题: 客户端一次只能读取一个日志文件&#xff0c;无法同时读取多个分区无法管理日志存放的分区(topic) 那我们一个如何去解决…