vue项目打包之后在本地运行最简单的方法

最新推荐文章于 2024-06-18 12:15:22 发布
最新推荐文章于 2024-06-18 12:15:22 发布
阅读量2.2k 收藏 9
点赞数 3
分类专栏： myskill vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44157964/article/details/116129623
版权
myskill 同时被 2 个专栏收录
31 篇文章 2 订阅
订阅专栏
vue
7 篇文章 0 订阅
订阅专栏

vue打包之后如果直接启动index.html文件的话就会出现报错Refused to apply style from 'http://127.0.0.1:5500/css/main.6df880bd.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
在这里插入图片描述

看到网上很多都说使用express-generator，但是个人感觉还是有点麻烦，下面方法用两句命令就搞定啦

一、在bash命令行输入npm install -g serve
二、接着输入serve -s dist

然后如下图，就可以启动了
在这里插入图片描述

胡肖一
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue项目打包部署到与后台同一服务器上
暮子凡的博客
07-10 4061
打包前配置修改 将代理注释掉（同一服务器没有跨域问题不需要代理请求） 修改资源路径 publicPath为 “./”, module.exports = { publicPath: "./", //outputDir: "dist", // 输出文件目录 //assetsDir: "static", // 配置js、css静态资源二级目录的位置 devServer: { open: true, //设置启动项目时默认打开浏览器 // proxy: { //
使用webpack打包后的vue项目如何正确运行（express）
10-17
这得益于 Express 对静态资源的友好支持，使得 Vue 项目可以通过简单的配置就能在 Node.js 服务器上顺利运行。希望这篇指南能帮助到你，如果你在操作过程中遇到任何问题，欢迎提问，我们将尽力为你解答。感谢你对...
vue3打包后dist文件在本地启动运行的步骤
会写点代码
06-11 907
vue3打包好项目后，想直接运行查看效果，可以通过http-server来启动。
vue项目build 打包之后如何本地访问
最新发布
qq_44776454的博客
06-18 699
Vue项目构建后实现本地访问的方法
Vue如何运行打包后的项目
博客简介
02-16 1174
Vue打包后的项目如何运行预览
关于vue打包后如何运行
有问题可关注公众号：前端研究院 后台输入问题回复
01-11 7790
1.首页安装nginx-v1.13.8   安装包私信我要吧~~    先解压到一个盘里  2.用记事本打开，修改端口号，我这边修改的是5200 3.启动这个nginx.exe    双击后  会有一个命令行窗口一闪而过  4.然后访问 http://localhost:5200，你会看到这个页面 5.然后将刚刚打包好的dist文件（就是你npm run build打包后
【转】怎样运行 Vue 打包后的项目
qq_33422122的博客
03-01 4624
Vue build 后运行命令，无需放入tomcat根目录
Vue 项目打包 部署 运行
ideal-lingyun
03-21 353
Vue 项目打包 部署 运行
vue-cli打包后本地运行dist文件中的index.html操作
10-14
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目...通过理解和掌握这些知识点，可以更好地处理Vue项目打包和本地运行的常见问题。
Vue-cli打包后如何本地查看的操作
11-19
在开发环境下，可以通过简单的npm run serve命令来启动本地服务器并预览项目。然而，当我们使用npm run build命令打包项目后，由于涉及到静态资源的托管和路由问题，我们不能直接在本地文件系统中打开index.html文件...
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
通过以上步骤，我们就可以在本地成功预览Vue-cli项目在生产环境下的打包结果。这不仅有助于我们在将代码部署到生产环境前对打包结果进行检查，也能够帮助我们发现可能存在的问题，确保最终用户在生产环境下能够获得...
浅谈webpack编译vue项目生成的代码探索
08-28
在创建一个简单的 Vue 项目时，我们通常会在 `main.js` 文件中引入 Vue 及应用的入口组件 `App.vue`。例如： ```javascript // main.js import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#...
vue 打包之后如何运行本地文件
wwf1225的博客
05-26 5250
vue 打包之后如何运行本地文件 1. 需要安装http-server 通过npm install -g http-server进行全局安装 2. 通过命令行进入到dist文件夹 运行http-server 3.在浏览器输入上述地址就可以访问了. 第二篇博客：https://blog.csdn.net/qq_22713201/article/details/95630246 ...
【前端学习】vue项目打包后如何启动
Dog Sun的博客
04-23 5465
https://blog.csdn.net/u014054437/article/details/79981307 https://blog.csdn.net/qq_22713201/article/details/95630246
vue项目打包后本地运行方法
zjltci的博客
04-20 7765
搭建express本地服务器 1.安装express-generator （cmd全局安装） npm i express-generator -g 2.cmd打开要创建项目的文件夹，跑下面的代码，创建一个express项目 express my-express-project 注：my-express-project 是项目名称，可随意自取，只要运行下面命令时保持统一即可。 3.进入项目目录 cd my-express-project 这时my...
如何打包VUE3项目并且部署到tomcat服务器上运行
m0_60689237的博客
04-30 1686
最近在学习vue时，发现一件非常尴尬的事情——那就是学了、写了这么久的vue项目，但好像还没有真正的将vue项目打包部署过。然后在尝试打包并部署vue项目的时候，遇到了一些问题，所以我对这些问题进行了总结，并分享给大家，希望能对大家有所帮助。
vue-cli2.0本地启动命令和打包命令
weixin_40667880的博客
12-25 1018
vue-cli2.0本地启动命令： npm run dev vue-cli2.0打包命令： npm run build
【vue项目本地打包测试，本地运行dist文件夹】
General_D的博客
09-28 1795
vue项目打包：npm run build //或者 # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod 本地虚拟服务依赖下载：npm install http-server -g 在对应生成的打包文件夹dist文件夹运行命令 http-server 复制地址到浏览器就可以啦~
vue打包本地启动方案
qq_28875189的博客
05-23 720
在本地启动Vue打包的方案有很多种。
vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行
01-14
Vue3和Vite是一对非常搭配的技术组合。Vite是一个基于ESM（即原生 ECMAScript 模块）的开发服务器，同时也是一个构建工具。它利用了浏览器的原生模块系统，不再需要打包，从而使得开发过程更加快速和高效。 Vue3作为Vite的官方支持框架，能够非常完美地结合在一起。在使用Vite进行开发后，如果需要在本地浏览器中直接打开运行，只需要简单的几个步骤即可实现。 首先，确保安装了最新版本的Vue CLI和Vite。然后，在项目根目录下使用命令行工具运行"npm run build"，这将生成打包后的文件。接着，使用命令行进入打包后的文件夹，并启动一个本地服务器，比如使用Python的SimpleHTTPServer。最后，在浏览器中访问本地服务器的地址，即可直接运行打包后的项目。 总的来说，Vue3和Vite的结合可以让开发变得更加简单和快速，并且能够很好地解决在本地浏览器中直接打开运行的问题。通过遵循一些简单的步骤，开发者可以快速地将项目部署到本地环境中进行测试和调试，极大地提高了开发效率。Vue3和Vite的强大功能让前端开发变得更加便捷和舒适。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胡肖一

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值