npm run build 生成的 dist 如何在本地直接运行

最新推荐文章于 2024-05-28 16:22:32 发布
最新推荐文章于 2024-05-28 16:22:32 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38107457/article/details/114578622
版权

网上找了下相关问题，将config文件夹里index.js的build中的assetsPublicPath从 ‘/’,改为了’./’，用浏览器打开index.html后部分组件没有加载出来，点击导航跳转的路由也变到了磁盘根目录。
直接在地址栏输入对应页面的路由也不行
没错，是搞错了，但不是代码搞错了，是方式搞错了
index页面不能直接打开，需要在服务器上打开
这时我们需要安装serve

npm install serve -g(全局安装serve)

在这里插入图片描述

weixin_38107457
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决vue项目,npm run build后,报路径错的问题
10-14
在Vue项目中，`npm run build` 是用来执行生产环境构建的命令，它将优化代码并准备部署到服务器。然而，有时在执行此命令后，可能会遇到路径错误的问题，导致资源无法正确加载。本文将详细解析如何解决这个问题，并...
如何在本地运行npm run build 打包之后的代码
weixin_42333548的博客
12-23 5746
使用基于 Node.js 平台，快速、开放、极简的 Web 开发框架Express 1、按照express创建出基本的结构 mkdir myapp cd myapp npm init package.json会被创建出来 2、安装express npm install express --save 会创建 node_modules 3、同级目录下创建index.js文件和www...
Nuxt通过build打包部署到线上
weixin_55042716的博客
03-29 922
nuxt有两种打包方式文件需要对不同打包方式进行配置。
npm run build命令详解及使用示例
最新发布
Leon_Jinhai_Sun的博客
05-28 2055
npm run build命令详解及使用示例
在react项目中 通过npm run build 打包后怎么运行浏览
Carrycjava的博客
10-10 2209
然后，打开浏览器地址栏输入“http://localhost”，可以看到“it works”内容页面。即可访问网页，默认监听的是8080端口号，打开浏览器输入 localhost:8080。打包完成后，文件夹中会出现一个build文件，此文件为打包好的项目文件。最后，需要把打包好的项目文件配置到 apache服务器则可以访问。方法二：使用Mac电脑自带的 apache服务器。2、终端进入build文件目录下输入。1、先在终端的全局安装此插件依赖。如何运行打包后的项目？1、输入命令进入此服务。
如何快速启动npm run build 后的dist文件呢？
柠檬不萌只是酸i
10-23 9270
(1)通过npm run build 打包后会出现如下： tips: 提示我们打包完的项目，必须要在http server 下才能运行。 （2）安装http server。 进入 dist 文件夹，然后启动一个http服务即可。 或者，你现在已经到apache 里面进行配置去了。 其实也可以不用那么麻烦，我们有nodejs环境，只要安装全局 http-server 服务就好了呀。(*...
在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问解决方法-直接打开访问是空白的解决方法
qq_61950936的博客
08-08 5309
在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问-直接打开访问是空白的解决方法。这个就是以 http 协议来打开 网页。这样上面两种方法都可以打开打包好的 dist 下面的网页。vue-cli 默认的需要http协议才能打开，这里需要配置一行代码即可解决！如果不加，打开是空白的额，需要在服务器上，即使用 http 协议才能打开！......
npm run build之后生成的dist如何扔到服务器运行（npm run build之后如何本地运行）
热门推荐
Zack_ZXY的博客
07-13 10万+
运行npm run build之后，会生成一个dist文件夹，里面的目录结构大概是这样的：生成完的文件我们怎么来运行呢？直接在本地打开inde.html是无法运行的，打包的时候有提示：构建文件应该通过HTTP服务器提供服务。所以我们要启动一个HTTP服务器才能够运行。选择一个HTTP服务器，下面用Apache Tomcat和Nginx为例，分别运行一下。一、Apche Tomcat1、下载Apch...
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
12-12
npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,执行npm run build 命令后，会生成dist目录，里边包含index.html和static文件夹。 npm run build的时候, 一...
vue本地打开build后生成的dist文件夹index.html问题
12-08
npm run build 在dist 文件生成了 index 和 static 文件夹，为什么本地打开不了，给后端就能打开？ 如何才能像访问 npm run dev 的地址那样访问？ 2.种简单方法 2.1 修改配置在本地访问 更改一些路径参数后，然后...
Vue 打包的静态文件不能直接运行的原因及解决办法
01-22
然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？ 原因 查看了一下打包后的 index.html 源码，终于发现了一个重要的点： 所有涉及到路径的地方全都是以 / 开头的 下面...
npm run build 打包后，如何运行在本地查看效果（Apache服务）
CWW2016的博客
09-05 5423
目前，使用vue-cli脚手架写了一个前端项目，之前一直是使用npm run dev 在8080端口上进行本地调试。项目已经进行一半了，今天有时间突然想使用npm run build进行上线打包，试试能否成功看到我的项目效果。一开始是毫无头绪，什么都不懂，直接是就在命令行上敲下：npm run build命令。 好开心啊，竟然没有报错。以为就这么简单的成功了，在浏览器上输入：htt...
npm run build后如何打开index.html跑起项目
weixin_30794499的博客
05-08 2326
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 提示：构建的文件应该通过HTTP服务器提供服务。在文件：/上打开index.html不起作用。 其实直接本地就可以打开。。。 只需要在build配置文件修改： a...
webpack打包vue项目之后生成的dist文件该怎么启动运行
u014054437的博客
04-17 9万+
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。我的vue项目结构如下：1. 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置)执行成功如下图所示：然后此时你会发现项目下多了一个 dist 文件夹，dist下文件便是项目打包之后生成的文件。此时我们直接在浏览器中打开inde...
怎么在本地运行打包文件dist
李木有大本事的博客
07-29 2314
怎么在本地运行打包文件dist #step1 安装serve npm install serve --save -g #step2 进入到dist目录 cd ???/dist #step3 执行serve serve #项目就会在5000端口运行
本地运行vue打包的dist文件
a754334599的博客
03-09 2092
1、全局安装 express-generator 执行命令 npm install express-generator -g 2、 项目初始化(这里把项目名设置为server) express -e server 3、进入项目根目录 cd server → npm i 安装依赖 → npm start 运行 4、将dist中文件复制到server 中 public文件中 5、浏览器输入http://localhost:3000查看项目 ...
打包生成的dist文件如何在本地运行
chongchong1325的博客
03-02 4778
1，首先，在angular项目中执行命令yarn build或者npm run build，打包生成dist， 2，到相应的dist目录下面，执行命令 npx hs . ，运行起来的环境如下截图： 3，如果package.json中配置了基础路径如下： "build": "npm run copy&ng build --prod --outputPath=dist/cicd...
Vue 打包，放到服务器的问题 总结
lhb_11的博客
03-06 2万+
Failed to load resource: net::ERR_FILE_NOT_FOUND或者vue dist文件下的index.html没显示 vue-cli npm run dev 可以看到，但是通过dist文件下的index.html直接打开没显示，没看到 知乎上：webpack.prod.conf.js 中output添加参数publicPath:'./' 具体： ...
npm run build 生成build文件还是dist文件
06-02
通常情况下，`npm run build` 会生成一个 `build` 或 `dist` 目录，用于存放项目的生产环境代码。具体生成的是哪个目录，取决于项目的配置。一般来说，如果你使用的是 `create-react-app` 或者类似的工具创建的项目...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值