关于vue项目+webpack 打包的坑

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

今天遇到一个打包  npm run build 的坑    打包出来 发现不是html文件  而是index.vue文件，由于我是第一次用这个 ，然后网上查了很多资料  后来发现 在config/index.js里面的文件配置有问题

开发环境的是没有问题的，不过生产环境就有问题啦  下面是生产环境

 

 这里的  index 是输出文件的名字 ， 我之前没注意居然是index.vue  后来改成了html 就可以啦

assetsPublicPath:'/' 是输出公共路径 默认是static  这里需要改成"./"

wangshang1320
关注
专栏目录
Vue--webpack遇到的坑
chenlim87的博客
03-04 287
1.安装好webpack后(npmiwebpack -g),在命令行输入webpack -h提示让安装webpack-cli,输入yes之后开始安装,安装完成再次输入webpack -h同样报错. 解决方法:查看了安装的webpack是4.xx.xx的版本,换成3.xx.xx的版本就解决了.安装webpack指定版本(npmiwebpack3.6.0 -g).成功之后再输入webpa...
关于vue的webpack打包优化问题
weixin_34245749的博客
03-30 510
vue是一个单例页面，所有页面都是由js动态渲染，因此js的体积会越来越大，从而影像页面的渲染性能 1.异步组件 官方推出了异步组件路由，是一个解决js打包后体积过大问题的方案， 可以很好的吧vue组件按组区分，从而打出不同的js文件，解决了单一js打包大的问题。 复制代码 以下是一个异步组件打包的最终文件 后面的数字为hash值，为了js不会缓冲 app为vue以及vue-router等第三方...
学些vue+webpack遇到的一些坑
weixin_34259232的博客
12-19 211
vue-loader和webpack版本冲突的问题 vue-loader 15.4.2的版本 和 webpack 4.28.0的版本在一起运行的时候 启动会报如下的错误。 上网没有搜到问题的原因 只是有人说是版本的冲突，执行npm i vue-loader@14.2.2 更改vue-loader版本到14.2.2后问题解决，如果有大牛无意中看到我这篇文章并知道原因的话，万望告知，谢谢。...
webpack打包
Primise7的博客
02-07 1827
webpack是前端开发中比较常用的打包工具之一，另外还有gulp，grunt。之前没有涉及过打包这块，这里介绍一下使用webpack打包的流程。 Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），W
Webpack不生成index.html
likunpeng6656201的博客
10-22 1694
没有导出你的最后2个插件，并且没有指定html文件名dist，因为HtmlWebpackPlugin应该生成相对于path，下面是固定配置： var path = require('path') var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin'); ...
vue2 + webpack5相适配的 能成功打包的 package.json 文件
08-25
vue2 项目 + webpack 打包工具，是一个非常经典的组合，但是在配置的过程中会老是出问题，例如：webpack、webpack-cli、vue-loader、vue-template-compiler、css-loader的版本的设定就是一个匹配的大问题；...
vue2+webpack搭建h5框架
03-12
通过Vue2和Webpack的结合，我们可以构建出高效、可维护的H5应用程序，利用Vue的组件化思想和Webpack的模块化管理，提升开发效率和项目质量。同时，随着项目规模的增长，还可以进一步引入Vue生态中的其他工具和库，如...
vue+webpack项目打包问题
深渊那支花的博客
05-14 941
vue+webpack项目打包问题1、vue项目打包出现空白页面2、vue+elementui项目打包后样式覆盖问题3、vue项目打包后elementui图标丢失问题 1、vue项目打包出现空白页面 报错页面 解决：将config/index文件里的assetsPublicPath改为‘’./‘’ 重新打包 2、vue+elementui项目打包后样式覆盖问题 解决：main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，ro
vue+webpack 打包文件 404 页面空白的解决方法
11-30
综上所述，解决Vue+Webpack打包后404页面空白的问题，主要涉及到服务器配置（如Nginx的try_files规则）、静态资源路径设置（通过Vue CLI的`publicPath`）以及Babel的正确配置（`.babelrc`文件）。通过调整这些配置，...
二、vue项目webpack打包
sinat_24918465的博客
09-30 204
1.入口(entry) :使用哪个模块来构建内部依赖图的开始 我们可以新建webpack.config.js来制定以上概念。接下来一项一项来解释。 1entry（如下图所示，分为单入口、多入口、混合入口） 2.输出(output) :在哪里输出它所创建的bundles及命名规则 【tips】这里需要注意的用__dirname需要引用node自带的path 【tips】filename中的[n...
关于vue项目使用webpack打包后dist下的index.html打开后空白的问题
wyblm521的博客
10-05 821
由于vue-cli3之后不需要手动配置webpack.config.js文件,因此可以这样进行vue项目的打包 如你生成的dist文件下的index.html为空白文件，即vue.config.js中的publicpath：’/'和上图中的不一样，修改一样后即可解决此问题 此外执行命令时，若package.json中无build指令，则执行npm run build:prod生成dist文件。 ...
关于vue+webpack开发时让人无语的坑
weixin_33737774的博客
05-29 133
在vue+webpack时会使用到各种依赖包等等，但是对于非前端工程师来说，可能会由于一些版本问题影响项目进度。所以说几个自己遇到的问题。 安装webpack时 由于webpack是一种自动化构建工具，强烈依赖node进行打包编译，所以,所以node与npm的版本是毕竟容易影响开发的，比如安装webpack时，由于node版本过低，一切依赖就会无法完全安装（如：webassemblyjs）。建议n...
vue.config 配置
tp27933的博客
09-25 965
這裡記錄下 練習vue時用到的config const path = require('path') function resolve (dir) { return path.join(__dirname, '.', dir) } module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '' : '/', outputDir: process.env.NODE_ENV === 'production' ?
Vue项目打包及优化处理
jyn15159的博客
10-10 1880
项目打包 1. 打包介绍 什么是项目打包： 项目开发是通过import这样的模块化技术完成的，而import代码在浏览器中不能直接运行。 项目开发是通过vue单文件组件方式开发完成的，浏览器不能运行vue单文件组件。 项目开发是通过less进行css样式控制的，浏览器不能运行less文件。 项目开发是通过element-ui组件库开发，浏览器不能运行组件库组件。 项目开发是通过es6/es7等高级js技术完成的，中低浏览器版本不能运行es6/es7等高级语法。 …… 基于以上若干，项目发布之前需要做打包处
[万字逐步详解]使用 webpack 打包 vue 项目（优化生产环境）
欢欢的博客
07-14 506
[万字逐步详解]使用 webpack 打包 vue 项目（优化生产环境） 之前在 [万字逐步详解]使用 webpack 打包 vue 项目（基础生产环境） 中比较详尽的手把手带着过了一遍 production 环境的部署，以及在 [万字逐步详解]使用 webpack-dev-server + ESLint 配置 vue 项目的开发环境中过了一遍使用 webpack-dev-server 配置开发环境，以及使用 ESLint 去提高代码质量的过程。 webpack 配置最后一节就讲一下怎么提高生产环境中打.
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt
07-31
标题：Vue2+IView+Webpack 与 Vue3+Vben+Vite 技术对比分析 内容概要： 这份PPT主要对比了基于Vue2的IView和Webpack技术栈与基于Vue3的Vben和Vite技术栈之间的差异，探讨了为何选择更新的技术和框架。报告中详细...
Vue项目-webpack打包
qq_41709082的博客
12-16 689
Vue项目打包 1.通过git 输入如下命令: npm run build 运行打包命令：注意 build 并不是固定写法，若想修改，可以自行在package.json文件中修改。 运行打包命令成功后，就会生成一个dist文件夹，直接将该文件丢到需要服务器即可上线。 注意：打包时，在项目的index.js(入口文件)文件中，axios的默认URL需要改成服务器的地址。 2.如果想在自己电脑...
编程: 去除网页中的index.html
最新发布
2301_79326588的博客
10-06 730
在网页开发中，"index.html"通常被用作默认的起始页面。在本篇文章中，我将向你展示如何在编程中去除网页中的index.html，并提供相应的源代码。首先，我们需要创建一个新的HTML文件，作为替代的起始页面。通过以上步骤，你可以成功地去除网页中的index.html，并使用自定义的起始页面。记得根据你的实际情况进行配置和调整，以满足你的需求。完成后，访问你的网站应该会显示新的起始页面"home.html"，而不是"index.html"。如果你使用的是其他服务器软件，你需要参考相应的文档进行配置。
总结关于webpack
weixin_59124055的博客
09-22 1472
Day01_webpack 铺垫(自学) yarn包管理器(可选) ==注意: 如果yarn实在安装不上可以用npm== 快速、可靠、安全的依赖管理工具。(类似npm作用) 中文官网地址: Yarn 中文文档 下载yarn 下载地址: 安装 | Yarn 中文文档 windows - 软件包(在笔记文件夹里) ==建议不要安装到中文路径下== ==建议和node安装到一个盘符下== mac - 通过命令安装(也可还用npm) sudo np
无需Webpack的Vue项目示例
PixelNovaO的博客
10-02 326
你可以通过CDN引入Vue.js来快速开始一个简单的Vue项目，或者使用Vue CLI的默认配置创建一个基本的Vue项目。如果你想要在不使用Webpack的情况下使用单文件组件，你可以结合使用Vue的CDN和简单的构建工具，如Parcel或Rollup。然而，有时候我们可能想要创建一个简单的Vue项目，而不使用Webpack作为构建工具。在本文中，我们将介绍一些不需要Webpack的Vue项目示例，并提供相应的源代码。首先，在HTML文件中引入Vue的CDN链接，然后创建一个单文件组件，例如。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值