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

如图所示:

相关推荐
Hao_Harrision8 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨| RangeSlider(范围滑块组件)
前端·typescript·react·tailwindcss·vite7
CC码码10 分钟前
不修改DOM的高亮黑科技,你可能还不知道
前端·javascript·面试
虚诚12 分钟前
vue2中树形表格怎么实现
前端·javascript·vue.js·ecmascript·vue2·树形结构
wuhen_n32 分钟前
Promise与async/await
前端
LYFlied34 分钟前
前端路由核心原理深入剖析
前端
用户190176844786534 分钟前
vue3规范化示例
前端
用户190176844786536 分钟前
Git分支管理与代码合并实践:保持特性分支与主分支同步
前端
没有鸡汤吃不下饭1 小时前
前端打包出一个项目(文件夹),怎么本地快速启一个服务运行
前端·javascript
liusheng1 小时前
Capacitor + React 的 iOS 侧滑返回手势
前端·ios
CUYG1 小时前
v-model封装组件(定义 model 属性)
前端·vue.js