webpack打包上线

已于 2023-06-17 17:48:58 修改
阅读量131 收藏
点赞数
分类专栏： 开发 文章标签： webpack 前端 node.js
于 2023-06-17 17:48:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iaz999/article/details/131262763
版权

1、在终端运行npm run build

npm run build

  看到 Build complete. 就是打包完成

 项目中会多出一个dist目录，就是我们要上线的内容

 

 在本地开启一个服务器

将dist目录里的文件复制到服务器目录下，与后端的接口文件同级，本地访问localhost就可以看到项目能够正常运行了

这样就是一个简单的项目打包上线的过程。

如果想要打包的文件放在后端服务器目录的一个文件中，通过localhost/project 这样的形式去访问

可以到config的index.js中修改 build的assetsPublicPath就可以访问了

iaz999
关注
专栏目录
webpack打包优化和打包上线
LiuBo_1999的博客
06-04 435
图片优化 使用 url-loader 优化， 将小图片转化成base64压缩,防止小图片太多请求次数太多。 下载 url-loader npm install -D url-loader 配置 在 webpack.prod.conf.js 文件夹中配置 module: { rules: [{ test: /\.(png|svg|jpg|gif)$/, use: [{ loader: 'url-loader', // 优化小图片
webpack 打包全流程
最新发布
harvestUachieve的博客
08-20 4283
只有在脚本使用时才会调用。ES6渐渐取代CommonJs。
vue----webpack----如何打包上线
weixin_34281477的博客
03-03 170
1.第一步 修改配置项 修改配置项　　将 config/index.js 中的assetsPublicpath:"/" 修改为 assetsPublicpath:"./" 2.第二步 打包 npm run build 3.第三步 直接将打包后的 dist 文件夹 给后端即可 转载于:https://www.cnblogs.com/SRH15...
VUE-CLI webpack 项目打包部署上线
weixin_34082177的博客
10-28 550
很简单不复杂只需要几步1、找到项目的 webpack环境配置的config目录下的index.js文件的assetsPublicPath把"/"改成 "./"得出： build: { env: require('./prod.env'), index: path.resolve(dirname, '../dist/index.html'), ...
webpack-vue-项目打包上线
fxinn的博客
11-07 318
打包上线 去除console.log命令 ： 安装 babel-plugin-transform-remove-console 在.babelrc文件里面添加 "plugins":["transform-remove-console"] 或者 在babel.config.js 里面添加 "plugins":["transform-remove-console"] 建议直接百度 成品 不带变得 babel-plugin-transform-remove-consol...
vue ---webpack 打包上线
weixin_34206899的博客
11-29 88
先来描述一下期间遇到的问题有哪些： 　　1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。　　2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。 1、项目目录结构 　　这是打包后的，所以有 dist 文件夹，打包方式：npm run build 2、webpack.config.js 　　 3...
WebPack打包流程「详细！！！」
m0_65302425的博客
07-14 3562
WebPack可以看做是模块打包机它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。vendor['babel-polyfill',"axios","marked","react","react-dom","react-router-dom"],//第三方文件。/*下载*/npminstall-Dhtml-webpack-plugin。...
vue-cli/webpack打包后上线出现路径错误404问题
小小前端
12-20 1217
文章目录问题：原因：解决办法：如果打包报错： 问题： 将打包好的项目部署到服务器，发现报错说图片找不到。 态资源如js访问不到 原因： 这个是因为webpack打包的时候引入js时使用的是绝对路径导致的，修改webpack打包文件中的配置 解决办法： 在项目中添加vue.config.js文件，内容如下： module.exports = { baseUrl: process.env.N...
webpack打包普通html项目,webpack打包处理
weixin_39693662的博客
06-18 3049
简介?webpack 是前端最流行的打包工具，能够做到以下：1) 将 sass/less 等预编译的CSS语言 转化为 浏览器能够识别的 css 文件2 )能够将多个文件(比如：多个sass文件)打包生成一个文件3 )能够打包 images/styles/assets/scripts 等前端常见的文件4 )搭建了开发环境(开启了服务器)5 )监视文件变化，文件改变后，能够自动刷新浏览器6 )对于V...
webpack打包发布
易的博客
08-23 2146
npm run dev npm run dist --线上   git status git add . git commit -am  "online adapter" git push    git pull git branch --查看当前分支是在哪里master 还是 admin yarn install v1.3.2 yarn run dist -- 打包 ...
vue+webpack支持多页面打包
01-06
vue+webpack结构，支持多页面打包。重点看配置，还可支持css引用图片。
VUE用webpack打包上线，页面出现空白，各种路径出错（每天都记录一个知识点）
vuex的学习笔记
04-20 430
**第一：懵逼 还是懵逼 只能怪自己webpack学的不好，看来要重头好好学习一下webpack了 ** 解决：找到 config > index.js build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dir...
使用 webpack 对项目进行打包发布
黑马程序员官方博客
12-29 1000
项目开发完成之后，需要使用 webpack对项目进行打包发布，主要原因有以下两点：① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件② 开发环境下，打包生成的文件不会进行代码压缩和性能优化为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。在文件的scripts节点下，新增 build 命令如下：--model是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩。
Vue+Webpack压缩打包及上线流程
will5451的博客
05-14 596
一、 使用Webpack+Babel打包Vue项目 步骤: 1、 安装babel相关的包 npm install babel-core babel-loader babel-preset-env –save-dev 2、 在项目根目录下创建一个babel的配置文件.babelrc 3、 在.babelrc中配置写好对应的json代码片段 4、 在webpack.config.js中使用babel-loader 5、 在webpack.config.js的插件配置中写上如下代码即可 6、在当前项目
前端webpack初始化到打包上线过程记录
EMMA_1986的博客
07-30 527
ssh连接虚拟机操作 node -v（版本返回结果：12.16.2） git --version（版本返回结果：git version 2.18.0）（视频上面的版本是2.8.0） webpack -v （未装，下面安装） 一、安装cnpm（注意-g不能少，必须执行软链接） npm install -g cnpm --registry=https://registry.npm.taobao.org（安装） sudonpm install -g cnpm --registry=https:/.
Vue学习之十二(webpack优化打包及发布上线)
David Wu
04-30 4409
优化总结思路 基本打包–>压缩bundle.js和html–>按需加载elementUI和iview–> 把静态资源从bundle.js中抽离–>把第三方包从bundle.js中抽离–>css从bundle.js中抽离 –>使用vue-router的路由懒加载 打包前,删除我们的dist文件夹 安装 clean-webpack-plugin 包...
运行vue项目报DONE Build complete. The dist directory is ready to be deployed.解决办法
Darren洋的博客
04-29 4015
运行vue项目报DONE Build complete. The dist directory is ready to be deployed.解决办法
DONE Build complete. The dist directory is ready to be deployed.
m0_62897992的博客
10-08 8338
DONE Build complete. The dist directory is ready to be deployed.问题
微信小程序测试详解：环境搭建与Webpack打包
其次，webpack是一个常用的模块打包工具，用于将小程序的各个模块打包成一个或多个bundle。在前端开发中，可以使用`npm run dev/staging`这样的命令来执行打包任务。具体的配置信息通常会放在如`ty-yzs-fe/src/mini_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值