vue打包后dist的使用

最新推荐文章于 2024-05-14 15:21:38 发布
原创 最新推荐文章于 2024-05-14 15:21:38 发布 · 5.6k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

在Vue项目打包完成后，打开dist文件夹中的index.html出现空白页和报错的问题，通常由publicPath配置引起。解决方案是将vue.config.js中的publicPath从'/'改为'./'，并重新打包。若存在路由跳转失败，需在router的index.js中将路由模式改为hash模式，使用createWebHashHistory替换createWebHistory，重新打包后问题解决。

发现问题

vue项目完成打包出dist后准备打开index.html，发现居然页面是一片空白，f12一片报红。

分析问题

经过多次网上查询后发现这是由于vue打包时，脚手架会帮你配置好大量参数，但其中路径publicPath被配置为了"/",需要手动修改。

解决办法

1、将vue.config.js中的publicPath:"/“修改为publicPath:”./"
请添加图片描述
2、删除之前的dist重新打包。

结语

再次打包后打开dist中的index.html，发现页面出来了，但是如果页面有路由跳转的话，会发现跳转失败，
这时需要修改router中的路由模式为hash:
在router的index.js中修改：从vue-router中引入createWebHashHistory，将createWebHistory(process.env.BASE_URL)改为createWebHashHistory(process.env.BASE_URL)。
请添加图片描述
最后重新打包即可。

手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
**My Coding Family**
03-24 1万+
零基础带你入门Vue项目打包部署到Linux服务器，一条龙服务，只为不远千里把你教会。
如何在Vue打包后修改文件中的接口地址配置
PixelInk的博客
09-26 1749
然而，当我们将Vue项目打包部署到生产环境时，需要修改打包后的文件中的接口地址，以连接到正确的服务器。接下来，我们需要在打包后的文件中修改接口地址配置。需要注意的是，每次打包Vue项目时，都需要进行上述的修改步骤。因此，在开发过程中，我们可以使用环境变量或配置文件来动态地设置接口地址，以便在不同的环境中自动切换接口地址。接下来，将修改后的文件和其他打包后的静态文件部署到生产环境的服务器上。通过以上步骤，我们成功地修改了Vue打包后文件中的接口地址配置。在这个文件中，我们需要查找并修改包含接口地址的代码。
Vue项目的打包方式、生成dist文件夹、assetsPublicPath、publicPath、history、hash
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
04-01 6008
Vue项目的打包方式、生成dist文件夹、assetsPublicPath、publicPath、history、hash
vue项目打包完成后，会生成 dist 文件夹，如何检验 dist 文件夹呢？
An滴饭儿的博客
02-02 1418
vue项目打包完成后，会生成 dist 文件夹，如何检验 dist 文件夹呢？
Vue项目的打包方式（生成dist文件）
热门推荐
商务合作 | 共同学习 | 携手共进
12-30 18万+
打包vue项目，生成dist文件夹。
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
10-16
webpack打包vue项目之后生成的...通过以上步骤和知识点的说明，我们可以了解到webpack打包Vue项目的`dist`文件后如何通过Express服务器进行部署和运行。这对于Vue和Node.js结合的全栈开发来说是十分基础且重要的操作。
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
10-14
Vue.js项目在开发过程中，通常会使用`npm run build`命令进行打包，打包后会在项目根目录下生成一个名为`dist`的文件夹，其中包含了编译后的静态资源，适合部署到生产环境。然而，有时候将项目推送到Git仓库时，可能...
vue项目打包后打开页面空白解决办法
08-27
在使用Vue框架开发项目时，打包优化与发布是项目上线前的重要步骤。然而，有时在打包完成后，开发者可能会遇到页面白屏的情况，这会严重影响用户的体验和项目的质量。为了解决这一问题，本文将详细探讨Vue项目打包后...
理解打包好的vue项目结构dist包
私聊前往站内信：https://i.youkuaiyun.com/#/msg/chat/weixin_44976692
05-14 2万+
这是第三方依赖库（如 Vue、Vuex、Vue Router 等）的 JavaScript 文件，被打包成一个单独的文件。这些字体文件通常被用于替代传统的图片图标，可以更好地适应不同分辨率的屏幕，并且可以通过 CSS 控制颜色、大小等样式，具有一定的灵活性。目录下，存放的是经过处理和压缩后的 CSS 文件，这些文件是从项目的源代码中提取、合并和压缩而来的。目录下，存放的是经过打包和处理后的 JavaScript 文件，这些文件包含了项目的逻辑代码。: 项目的入口 HTML 文件，是前端应用的主页面。
vue项目打包后dist目录运行方法
前端金牌摸鱼达人
10-19 4336
dist-vue
vue本地打开build后生成的dist文件夹index.html问题
10-16
主要介绍了vue本地打开build后生成的dist文件夹index.html问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
vue打包部署文件可继续修改内容？
曹豆芽
06-07 9306
今天在公司豆芽接了一个需求，就是打包部署之后，我们可以修改页面的静态文字内容，并且在页面生效(不重新打包情况下)，那么豆芽一接到这个需求的时候，里面想到将所有的静态文字内容，放入一个配置js中，直接修改这个配置js就可以了。这样想一想，在这里分享一下。欢迎交流不一样的方法。 在vue项目文件的puclic新建static/configuration.js(静态文字配置文件) configuration.js //configuration自己定义名字 //window对象添加自定义属性，供项目使用 win
【vue项目本地打包测试，本地运行dist文件夹】
General_D的博客
09-28 3557
vue项目打包：npm run build //或者 # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod 本地虚拟服务依赖下载：npm install http-server -g 在对应生成的打包文件夹dist文件夹运行命令 http-server 复制地址到浏览器就可以啦~
运行 dist 打包文件：简单得很!!!
mygoes
08-04 1万+
运行 dist 打包文件：简单得很!!!1. 一般打包完成后会在项目根目录生成一个 dist 文件夹，此时，我们在项目根目录新建一个 js 文件（我以 server.js 为例），server.js 中代码如下：2. 在项目根目录下运行 node 命令启动 server.js 文件：3. 到此，只要在浏览器输入：`http://localhost:8012` 即可预览 dist 文件夹的打包 项目打包完成后，会生成 dist 文件夹，如何检验 dist 文件夹呢？ 1. 一般打包完成后会在项目根目录生成
将 Vue 打包生成的 dist 文件运行在你的服务器上（最全教程）
浮小夏的博客
09-02 8195
将 Vue 打包生成的 dist 文件运行在你的服务器上（最全教程） 你可能需要用到的工具：PuTTY、FileZilla 1 在服务器（CentOS）上安装 Node 参考文章：https://zhuanlan.zhihu.com/p/126704711 1️⃣在服务器上找好（创建） Node 的安装位置，例如： /usr/local/temp 2️⃣在 Node 中文网下载 Node 安装压缩包 3️⃣在第 1 步的安装位置处下载 Node 安装压缩包 wget https://npm.t
Vue项目打包dist目录介绍
初心不改
06-08 3434
② .css.map文件是一个Source map文件，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。① .css文件是项目要用到的css文件,当你做webpack打包的时候，会把所有的css样式打包到这里。③ 其他.js文件是使用路由懒加载打包后的文件，按需导入路由，文件的名字是路由懒加载配置中的分组名称。① app.js：放的是项目中各个页面的逻辑代码，将格式进行了压缩。存放的是项目里的所有js文件，
vue - dist
weixin_33853794的博客
09-09 457
描述：打包后准备上线的文件（需要服务器环境才能运行！！！）  
idea vue打包后没有dist文件夹
最新发布
11-26
<think> 我们参考了上述引用内容，特别是引用[3]和[4]提到了在IDEA中打包Vue项目的步骤：通常通过运行`npm run build`命令，打包后的文件会生成在dist目录下。 用户遇到的问题是在IntelliJ IDEA中打包Vue项目后没有生成dist文件夹。我们分析可能的原因及解决方案如下： 可能原因： 1. 打包命令执行失败，没有成功完成打包过程。 2. 打包命令的输出路径配置有误，可能被修改到了其他目录。 3. 项目文件结构或配置问题导致打包过程出错。 解决步骤： 1. **检查打包过程是否成功**： 在IDEA中，打开Terminal（终端），进入项目根目录（确保package.json所在目录），然后执行： ```bash npm run build ``` 观察终端输出，如果打包成功，通常会显示“Build complete”或类似成功信息，并且会提示生成的文件路径。如果出现错误信息，则需要根据错误提示解决问题。 2. **查看打包输出信息**： 在打包过程中，终端会输出打包的详细信息，包括输出路径。通常Vue CLI项目的默认输出目录是`dist`，但有时可能被修改。可以在`vue.config.js`（如果存在）中检查`outputDir`配置项，例如： ```javascript module.exports = { outputDir: 'dist', // 检查这里是否被修改为其他目录 // ...其他配置 } ``` 如果没有`vue.config.js`，则默认就是`dist`目录。 3. **检查项目根目录**： 打包完成后，在项目根目录下查找`dist`文件夹。如果还是没有，可以尝试在文件系统中搜索`dist`文件夹，看是否被生成到了其他位置。 4. **检查打包脚本**： 打开`package.json`文件，查看`scripts`部分中的`build`命令是什么。通常应该是`vue-cli-service build`。确保该命令正确。 5. **清理缓存重新打包**： 有时候缓存可能导致问题，可以尝试删除`node_modules`和`package-lock.json`（或`yarn.lock`），然后重新安装依赖并打包： ```bash rm -rf node_modules rm package-lock.json # 如果是yarn则删除yarn.lock npm install # 或yarn install npm run build ``` 6. **检查文件系统权限**： 确保项目目录有写入权限，否则可能无法创建dist目录。 7. **查看IDE控制台错误**： 如果使用IDEA的图形化方式打包（通过双击npm脚本），请查看IDEA的运行控制台是否有错误信息。 8. **其他可能**： - 项目路径过长或包含特殊字符，尝试将项目移动到简单路径（如D:\project）下再打包。 - 检查磁盘空间是否充足。 如果以上步骤仍无法解决，请提供打包时的具体错误信息，以便进一步分析。 根据引用[3]和[4]，在IDEA中打包Vue项目通常有两种方式：命令行（终端）和图形化（npm脚本）。如果命令行方式可以生成dist而图形化方式不行，可能是IDEA的npm配置问题。 另外，引用[2]提到IDEA需要安装Vue.js插件来支持Vue项目，确保插件已安装并启用。 引用[1]中提到了创建Vue项目时选择Element Plus，但这对打包生成dist没有直接影响。 总结：按照上述步骤逐步排查，重点检查打包命令执行情况、输出路径配置和项目配置。 生成相关问题： 1. 如何在IntelliJ IDEA中配置Vue项目的打包路径？ 2. Vue项目打包时出现错误如何调试？ 3. 如何修改Vue项目的默认输出目录？ </think> ### IntelliJ IDEA中Vue项目打包后未生成dist文件夹的解决方案 根据引用内容[3][4]，Vue项目在IDEA中打包通常通过`npm run build`命令实现，默认会在项目根目录生成dist文件夹。未生成的可能原因及解决方案如下： --- #### **1. 检查打包命令执行状态** - **问题**：打包过程可能中断或失败 - **解决方法**： 1. 在IDEA终端执行打包命令： ```bash npm run build ``` 2. 观察终端输出： - 出现`Build complete`表示成功[^4] - 出现红色错误提示需按报错修正（如依赖缺失、语法错误等） 3. 示例成功输出： ``` ✓ Building for production... Build complete. ``` --- #### **2. 验证输出路径配置** - **问题**：vue.config.js中自定义了输出路径 - **解决方法**： 1. 检查项目根目录的`vue.config.js`文件： ```javascript module.exports = { outputDir: 'dist', // 确保值为'dist'（默认值） } ``` 2. 若无此文件，表示使用默认配置（输出到dist目录） 3. 若已修改路径，在项目内搜索目标文件夹名 --- #### **3. 检查文件系统权限** - **问题**：无权限创建文件夹 - **解决方法**： 1. 右键点击项目根目录 → 属性 → 安全 2. 确保当前用户有**完全控制权限** 3. 尝试在其他目录创建新项目测试 --- #### **4. 清理缓存重新构建** - **问题**：构建缓存异常 - **解决方法**： 1. 删除以下目录/文件： - `/node_modules` - `/dist`（如果存在） - `package-lock.json` 2. 重新安装依赖： ```bash npm install npm run build ``` --- #### **5. 验证打包脚本** - **问题**：package.json中build命令被修改 - **解决方法**： 1. 打开`package.json`文件 2. 检查scripts配置： ```json "scripts": { "build": "vue-cli-service build" // 正确配置 } ``` 3. 异常示例（错误输出路径）： ```json "build": "vue-cli-service build --dest custom_dir" // 需删除--dest参数 ``` --- #### **6. 检查磁盘空间** - **问题**：磁盘空间不足导致写入失败 - **解决方法**： 1. 检查IDEA状态栏的磁盘空间提示 2. 清理磁盘确保 >1GB可用空间 > **操作建议**：优先尝试步骤1→步骤4，90%问题可通过清理缓存和检查打包日志解决[^3][^4]。若仍不成功，在终端执行`vue inspect > output.js`可导出完整构建配置供分析。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值