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

如图所示:

相关推荐
子兮曰10 小时前
OpenClaw入门:从零开始搭建你的私有化AI助手
前端·架构·github
吴仰晖10 小时前
使用github copliot chat的源码学习之Chromium Compositor
前端
1024小神10 小时前
github发布pages的几种状态记录
前端
不像程序员的程序媛12 小时前
Nginx日志切分
服务器·前端·nginx
北原_春希13 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
JY-HPS13 小时前
echarts天气折线图
javascript·vue.js·echarts
尽意啊13 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜13 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts
O_oStayPositive13 小时前
Vue3使用ECharts
前端·javascript·echarts
竹秋…13 小时前
echarts自定义tooltip中的内容
前端·javascript·echarts