vue-cli 打包 npm run build 后的问题

最新推荐文章于 2024-09-15 11:45:28 发布
最新推荐文章于 2024-09-15 11:45:28 发布
阅读量2.2k 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38544803/article/details/79385630
版权

1.打包后第一个问题是打开dist中的index.html没有显示页面，空白页面。

一。打开config的文件夹中的index.js


如图把assetsPUblicPath修改为‘./’

然后再次打包发现路由的内容不法渲染并且无任何错误，

二.把路由中的model注释掉


打包好页面就可以完整渲染出来了




程序侯
关注
专栏目录
vue-cli4打包过程
m0_64969829的博客
01-13 1024
1.在根路径下创建vue.config.js文件 2.vue.config.js文件里需要进行配置 module.exports = { publicPath:'./' , productionSourceMap: false, devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 hotOnly: false, // 热更新 overlay:
vue-cli项目打包
qq_43121828的博客
09-09 229
1.打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js（config/index.js）文件 2.其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./’,即“/”前加点 ...
Vue实战指南：Vue打包优化，Webpack的八大配置方案
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-15 1904
此时，合理的配置不仅能够提高开发效率，还能在不影响用户体验的前提下进行频繁的更新。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过为输出文件添加哈希值，使得浏览器能够缓存这些文件，在没有变化的情况下，用户再次访问时可以直接从缓存加载。通过懒加载模块，即在需要时才加载代码，而不是一开始就加载所有代码，可以有效减少初始加载时间。在生产环境下，应该启用Webpack的各种优化特性，以确保输出的代码是经过充分压缩和优化的。，为我们广大开发同胞谋福祉，
Vue-cli 项目打包布署（简单清晰）
zhouzuoluo的博客
07-25 3392
· 第一步：项目打包前更改项目config配置 打开项目的 config>index.js文件修改build对象的assetsPublicPath: 属性值为 './ ' 如下     · 第二步：对vue-cli项目进行打包 在运行窗口输入cmd后打开命令窗口，在项目文件下输入npm run build命令 如下：       D:\vuecellauto\201807...
vuecli项目打包
User_XuKang的博客
04-25 7121
有几个问题 1.你知道软件的开发流程吗 答：需求获取--需求分析--设计--开发--测试--打包部署--上线 2.为什么要打包 答：前端的html，css，js越来越多，打开一个页面发送http也就变得很多，让后端服务器有很大压力，前端不利于性能优化，所以就要打包。把js合并压缩，css合并压缩，图片转换成img-base64 如何打包 在vuecli脚手架中 直接执行npm run build 不就行了吗 确实可以 但是是脚手架帮我们做了一些事情。 执行完npm run build之后会
vue-cli2 打包
weixin_34416649的博客
05-30 539
npm run build 打包安装 相当于静态资源 解决vue-cli项目打包出现空白页和路径错误的问题 路径错误的问题解决方式： 打开config文件夹下的 index.js 找到如下图所示区域： 将build中assetsPublicPath: '/', 改为assetsPublicPath: './', build: { // Template for...
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
在生产环境下，我们通常会使用npm run build命令进行代码的打包，以优化性能、压缩文件等。然而，在完成打包后，经常遇到在本地无法打开打包后的应用文件的问题。这通常是因为Vue-cli默认设置的静态文件服务路径问题...
vue-cli使用 npm run build打包后流程
weixin_40588273的博客
09-20 3650
目前，使用vue-cli脚手架写了一个前端项目，之前一直是使用npm run dev 在8080端口上进行本地调试。突然想使用npm run build进行上线打包，试试能否成功看到我的项目效果。 1. npm run build命令。 ** 2.一开始运行npm run build 命令时，有这么一段提示： ** 这段话的意思就是说： 构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。 到项目目录下的config文件夹里的index.js文件中,将build对象下的as
基于vue-cli npm run build之后vendor.js文件过大的解决方法
10-17
当使用vue-cli进行项目构建（npm run build）后，如果发现生成的vendor.js文件体积过大，这将直接影响到首屏加载时间，降低用户体验。为了解决这个问题，可以采取以下方法。 首先，了解问题的本质。vue-cli的npm ...
使用vue-cli打包过程中的步骤以及问题的解决
11-28
1、打包命令是npm run build，这个命令实际上是在package.json中，scripts中build所对应的命令； 2、创建一个prod.server.js，这个文件不是必须的，这个文件的用处是在打包完毕之后，通过启动node.js本地服务来...
详解 vue-cli 的打包配置文件代码（带注释）
2401_84436095的博客
05-04 1109
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】x,// 是否注入 html// 压缩的方式minify: {},}),// 没有指定输出文件名的文件输出的静态文件名return (前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-tBldAzXB-1714762082079)]
详解webpack+vue-cli项目打包技巧
08-30
本篇文章主要介绍了详解webpack+vue-cli项目打包技巧 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
这个项目是基于vue-cli3.0来构建，并且根据需求做了打包多页面应用；能实时的编译打包；
01-24
这个项目是基于vue-cli3.0来构建，并且根据需求做了打包多页面应用；能实时的编译打包，对于路由做了修改处理，可以完美的跑在前后台不分离的项目中；并且对于配置文件做详细的注释
打包Vue-cli项目：详细方法解析
TechSavant的博客
09-23 829
Vue-cli是一个用于快速构建Vue.js项目的脚手架工具，它简化了项目的初始化和配置过程。在开发完成后，我们通常需要将Vue-cli项目打包成静态文件，以便部署到生产环境中。本文将详细介绍如何打包Vue-cli项目，并提供相应的源代码示例。Vue-cli提供了简单而强大的工具，帮助你快速构建Vue.js应用程序，并将其打包成静态文件，以便部署到生产环境中。这将启动一个交互式的命令行界面，你可以根据自己的需要选择不同的配置选项。这将触发Vue-cli的构建过程，它将扫描你的代码并将其打包成静态文件。
vue-cli4打包最强优化（10M变300kb），网易架构师深入讲解前端开发
2401_84023262的博客
04-04 1193
压缩前后大小大致如下：可以看到相应头中存在 Content-Encoding:gzip 表示已经配置成功。
2024年前端最新详解 vue-cli 的打包配置文件代码（带注释），web开发学习过程
2401_84123265的博客
05-07 1585
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】给大家分享一些关于HTML的面试题。// 如果 Node 的环境无法判断当前是 dev / product 环境// 使用 config.dev.env.NODE_ENV 作为当前的环境if (!// 一个可以强制打开浏览器并跳转到指定 url 的插件// 使用 NodeJS 自带的文件路径工具// 使用 express// 使用 webpack// 使用 proxyTable 热更新。
记录 vue-cli build 打包之后的问题
Qlily_ing的博客
09-28 1409
1.打包之后首页没有双引号的问题 在 build 的webpack.prod.conf.js 下 ，修改 removeAttributeQuotes，改为 false     2. 首页路径的问题 config 中index.js   assetsPublicPath 修改   改为  ：   assetsPublicPath: './',     3. 再者打不开 可能是 在ro...
vue-cli 构建新的打包环境
孤月葬花魂的博客
07-03 201
项目配置 package.json文件 { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", // 新增, 名字自定义，注意不要使用 server/build/test, 这是创建项目时默认的 "custom": "vue-cli-service build --mode custom" }, } 以 vscode为例 此时npm脚本列表里会多出一个 c
vue-cli4 配置不同开发环境打包命令
qq_43532275的博客
07-24 934
vue-cli4 配置不同开发环境打包命令
C:\Users\admin\geeyoukindergarten\geeyoou-ui>npm run Scripts available in geeyoou@3.8.1 via `npm run-script`: dev vue-cli-service serve build:prod vue-cli-service build build:stage vue-cli-service build --mode staging preview node build/index.js --preview lint eslint --ext .js,.vue src
07-13
- `npm run build:prod`：用于构建生产环境的项目，运行`vue-cli-service build`命令。 - `npm run build:stage`：用于构建测试环境的项目，运行`vue-cli-service build --mode staging`命令。 - `npm run preview`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值