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

如图所示:

相关推荐
肥肠可耐的西西公主25 分钟前
前端(AJAX)学习笔记(CLASS 2):图书管理案例以及图片上传
前端·笔记·学习
大胖丫27 分钟前
vue 学习-vite api.js
开发语言·前端·javascript
孙桂月28 分钟前
ES6相关操作(2)
前端·javascript·es6
陈浩源同学28 分钟前
学习 TypeScript 栈和队列数据结构
前端·算法
天天开发29 分钟前
【零代码革命】用Trae打造Flutter应用:AI助力,小白秒变工程师-页面调教篇
前端
我这一生如履薄冰~30 分钟前
简单封装一个websocket构造函数
前端·javascript·websocket
fangcaojushi31 分钟前
解决webpack5.54打包图片及图标的问题
前端·vue.js
海盗强31 分钟前
Webpack打包优化
前端·webpack·node.js
星之卡比*33 分钟前
前端面试题---vite和webpack的区别
前端·面试
^^为欢几何^^38 分钟前
npm、pnpm和yarn有什么区别
前端·npm·node.js