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

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

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

报错码:

bash 复制代码
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

如图所示:

相关推荐
C澒3 小时前
微前端容器标准化:容器标准化能力的 “配置化+ 插件化”
前端·架构
anOnion8 小时前
构建无障碍组件之Carousel Pattern
前端·html·交互设计
ssshooter9 小时前
Tauri 2 iOS 开发避坑指南:文件保存、Dialog 和 Documents 目录的那些坑
前端·后端·ios
Можно9 小时前
深入理解 ES6 Proxy:与 Object.defineProperty 的全面对比
前端·javascript·vue.js
Birdy_x10 小时前
接口自动化项目实战(1):requests请求封装
开发语言·前端·python
天天向上102411 小时前
vue el-table实现拖拽排序
前端·javascript·vue.js
柳杉12 小时前
Three.js × Blender:从建模到 Web 3D 的完整工作流深度解析
前端·javascript·数据可视化
reembarkation13 小时前
vue3中使用howler播放音频列表
前端·vue.js·音视频
手握风云-13 小时前
基于 Java 的网页聊天室(三)
服务器·前端·数据库
weixin1997010801613 小时前
《识货商品详情页前端性能优化实战》
前端·性能优化