vue 打包需要注意的事情

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

vue2.x 打包遇到的问题

  1. 打包路径问题
    build 下 webpack.base.conf.js 找到 build {} assetsPublicPath字段 把 ‘/’ 改成’./’
    ‘/’ 从根路径找
    ‘./’ 从当前路径找
    2.路由模式
    打包后history模式 页面会出现空白, 改为hash模式, 但是这样会有# 这个在想办法
TO_WebNow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中一些需要注意的点
fu_ycc的博客
08-27 306
1.修改prop中的数据 每次父组件更新时，子组件的所有 prop 都会更新为最新值。不能在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告。 在两种情况下，我们很容易忍不住想去修改 prop 中数据： Prop 作为初始值传入后，子组件想把它当作局部数据来用； Prop 作为原始数据传入，由子组件处理成其它数据输出。 对这两种情况，正确的应对方式是： 定义一个局部变量，并用 p...
修改Vue打包后的默认文件名操作
10-14
### 四、注意事项 - 更改`assetsDir`可能会影响到你的部署脚本，确保更新脚本以正确地指向新的输出目录。 - 如果你的项目使用了CDN，记得更新CDN路径以指向新的文件夹。 - 文件名的哈希值是基于文件内容生成的，...
vue打包之后出现空白页的原因以及解决方式
热门推荐
温情
04-02 3万+
路由模式 history 新建项目什么都不动，路由模式：history, 直接npm run build打包 打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/' 那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文
Vue在打包项目时显示空白页问题和一些解决思路
benlalagang的博客
08-01 7467
Vue在打包项目时显示空白页问题和一些解决思路、1.整体资源路径、2.路由模式、3.本地服务器的改变
vue项目打包后显示空白解决方案？
DW14687的博客
12-09 8505
目录前言一、页面空白？二、图片加载不出来？总结vue打包后会出现空白页面，这说明配置的时候路径有问题，接下来一起看看如何解决把。页面空白说明打包路径有问题，打开config/index.js，找到build下的assetsPublicPath，修改为'./'，如下：这里说一下，dev环境下 assetsPublicPath: '/'，表示项目根目录，build 环境下的 assetsPublicPath: './'，表示当前更目录配置完后打包发现有页面出现了注意：如果还没有页面出现，那可能是你的路由模式选用
vue 打包空白
qq_38388578的博客
01-04 258
1、改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径  assetsPublicPath默认的是  ‘/’  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ ’ 2、另外还需要注意一点。src里边rou...
vue项目打包白屏解决
m0_73321385的博客
06-13 9013
如果使用了 Vue Router history 模式，在打包后需要配置服务器，以避免出现404错误。在 Vue 项目中，打包后会生成一个 dist 目录，确保 index.html 引用的资源路径都是相对于 dist 目录的。如果在本地测试时没有问题，但是打包后出现了白屏，可能是因为本地使用了服务器，但是打包后未启动服务器，需要手动启动服务器。如果打包后出现了白屏，可能是因为路由没配置正确。可以检查路由文件是否正确引入、是否正确配置了路由及其子路由等。如果没有生成，说明打包过程出现了问题。
使用webpack搭建vue项目及注意事项
12-11
在本篇文章中，我们将探讨如何使用Webpack 搭建Vue项目，并关注其中的关键知识点和注意事项。 首先，Webpack 配置文件（通常为 `webpack.config.js`）是整个项目构建的核心。在这个文件中，我们可以定义入口（entry...
vue-cli3.0配置及使用注意事项详解
01-21
这次给大家带来vue-cli3.0配置详解，使用vue-cli3.0配置的注意事项有哪些，下面就是实战案例，一起来看一下。 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run ...
study-vue:有关vue学习的一些注意事项
03-15
在深入探讨Vue.js的学习路径之前，我们先了解一下Vue的核心概念。Vue.js是一个轻量级的前端JavaScript框架，它以其易学易用、组件化开发和高性能的特点受到开发者们的喜爱。Vue的设计理念是让开发变得更加简单，它...
vue项目打包后打开页面空白解决办法
08-27
主要介绍了vue项目打包后打开空白解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue打包后显示空白正确处理方法
08-28
很多朋友遇到这样的问题当vue打包后显示空白问题，遇到这样的问题怎么处理呢？下面脚本之家小编给大家分享下vue打包后显示空白正确处理方法，感兴趣的朋友一起看看吧
webpack4打包vue前端多页面项目
12-08
7. **其他注意事项**： - 配置中可能还需要包括对图片、CSS预处理器等的处理，例如使用 `file-loader` 或 `url-loader` 处理图片，`style-loader` 和 `css-loader` 处理CSS。 - 开发服务器可以配置为热更新（hot ...
vue打包注意事项
CSDNyingying的博客
08-20 1630
最近在学习前端的知识，就选择了vue框架，我们几个后端的臭皮匠也应该可以顶小半个前端了吧，哈哈 自己做了个demo，发现执行那npm run build 打包后的文件夹用tomcat启动后页面出现空白现象，结合各大百度上的方法解决各种打包后的基础问题 1.在config下的index.js文件里需要修改两个地方 1）.assetspublicpath:"./",这里要加一点，这个是静......
解决vue打包之后空白问题和路由问题
xiaoyao_zhy的博客
06-19 7403
1.打包之后打开dist之后页面空白出现该问题的大概率原因是打包之后，原先图片或者路由等的路径发生改变，在结合百度搜索之后找到的解决方法，希望能帮到你。解决方法 修改vue.config,js文件（修改成如下形式即可） 在这里如果出现model缺失一般提示的是node-polyfill-webpack-plugin缺失这里直接npm install node-polyfill-webpack-plugin --save即可2.路由无法使用解决方法将路由方式改为hash路由注意观察第一行导包导的包是cre
vue解决执行打包之后打开页面空白问题
qq_60976312的博客
12-28 1685
解决执行build打包命令之后打开dist文件下的html页面空白的问题
vue项目打包后一片空白解决办法
最新发布
weixin_42017221的博客
02-17 416
src里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。
vue 打包注意事项
wangongchao的博客
09-02 741
1.把绝对路径改为相对路径：打开config/index.js 会看到一个build属性，这里就是我们打包的基本配置了。在这里可以修改打包的目录，打包的文件名。最重要的是一定要把绝对目录改为相对目录。即：把 assetsPublicPath:’/’ 改为 assetsPublicPath:’./’ 图片引用时，是有区别的，如果是静态加载(template/style下)，直接用相对地址即可，如果是动态加载(script下)，则需要 require(‘相对地址’) 才能成功（import也可以的）！
解决vue项目打包后打开index.html一片空白
sinat_36141399的博客
11-30 1万+
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 ...
vue3项目打包注意事项
09-11
在打包vue3项目时，有几个需要注意的事项。首先，当使用npm运行`npm run build`进行打包后，如果在使用Tomcat启动打包后的文件夹时，出现页面空白的问题，可以尝试解决以下几个常见的打包问题。 第一步，需要在项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值