vue.config.js分测试正式打包(分模块打包配置)配置

最新推荐文章于 2025-06-20 17:20:39 发布
原创 最新推荐文章于 2025-06-20 17:20:39 发布 · 7.9k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue-cli3.0 #webpack

这篇博客介绍了如何在Vue CLI 3.0环境中进行分测试和正式环境的打包配置，包括在`package.json`中设置打包命令，创建`.env.prod`和`.env.test`文件以定义不同环境的变量，以及在`vue.config.js`中配置输出目录、静态文件路径和分模块打包。此外，还提到了`devServer`的配置，用于本地开发时的代理设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

vue-cli3.0打包配置准备工作

package.json里打包命令:

"build-test": "vue-cli-service build --mode test",

"build-prod": "vue-cli-service build --mode prod",

项目下新建.env.prod和.env.test文件:

NODE_ENV = 'production' //配置参数
VUE_APP_BASE_URL = '//test.yang.com:8000/web/vue/'//静态资源打包目录
OUTPUTDIR = 'dist'//输出目录

项目下新建vue.config.js文件:

module.exports = {
  publicPath: process.env.VUE_APP_BASE_URL, // 静态文件目录(baseUrl Vue CLI 3.3 起已弃用)


  outputDir: process.env.OUTPUTDIR,

  assetsDir:相对于 outputDir 的(process.env.OUTPUTDIR+'/assets/')
  indexPath: 'html/app/index.html', // 打包路径 相对于 outputDir

filenameHashing:true,//静态文件后是否生成hash值,建议为true默认

--分模块打包需要pages:{

--也可以只写一

最低0.47元/天 解锁文章

200万优质内容无限畅学
vue.config.js配置打包之类操作 webpack（压缩js，css,图片）
shi19970609的博客
12-28 2360
// vue.config.js的基础配置 const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') //js css 压缩 const productionGzipExtensions = ["js", "css", 'scss']; // 需要gzip压缩的文件后缀 const merge = require("lodash.merge"); //对象合并插件 const U.
Vue CLI4 Vue.config.js标准配置(最全注释)
10-15
Vue.config.js 文件是 Vue CLI4 中用于自定义项目配置的地方，它允许开发者调整默认构建设置以适应特定项目的需求。以下是一些关键配置选项的详细说明： 1. **publicPath**: 这个配置项决定了生成的静态资源在生产...
vue.config.js中如何配置分包策略
sg_knight的专栏
08-19 2782
代码分包是一种将应用的代码按照一定的规则和策略分割成不同的块，然后在需要的时候进行加载的方法。这可以帮助减小初始加载的文件大小，从而提高页面加载速度。Vue 提供了一种配置分包策略的方式，允许您将不同模块、库以及异步加载的代码分割成单独的文件，从而更好地利用浏览器的缓存机制。Vue.js 提供了灵活的分包策略配置选项，使得优化应用的加载性能变得更加简单。通过合理地配置分包策略，您可以将代码分割成更小的块，从而加快页面加载速度，提升用户体验。
vue3 vue.config.js分包配置
weixin_43845059的博客
10-13 803
vue3 vue.config.js 分包配置
vue.config.js配置学习
最新发布
m0_56885551的博客
06-20 236
baseUrl在vue-cli 3.3 时弃用了，自此之后使用publicPath。的文件名：indexPath。默认：'index.html'
vue分包加载
m0_50884068的博客
03-18 2613
// vue.config.js module.exports = { configureWebpack: { optimization: { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, // 针对大于20000k的文件，最终
vue3.0下配置多环境打包
twoyaotian的博客
09-01 993
首先在项目根目录下新建3个文件 ①.env.testt配置（就是测试环境） NODE_ENV = ‘test’ VUE_APP_CURENV = ‘test’ ② .env.development配置（就是开发环境） NODE_ENV = ‘development’ VUE_APP_CURENV = ‘development’ ③ .env.production配置（就是生态环境及线上环境） NODE_ENV = ‘production’ VUE_APP_CURENV = ‘production’ 其次在
vue cli3.0根据不同的环境打不同的包
qq_42852004的博客
07-01 1326
参考博客: (1) https://www.jianshu.com/p/adc33ac846f9 (2)https://www.cnblogs.com/heroljy/p/9305263.html 方案一: 第一步: 在package.json中新建三个文档: (1).env.test(开发环境);(2).env.development(测试环境);(3).env.production(正式环境)...
vue.config.js中配置Vue的路径别名的方法
10-15
接下来，我们可以通过`configureWebpack`选项来配置Webpack，Webpack是Vue.js项目默认使用的模块打包工具。在`configureWebpack`中，我们可以设置`resolve.alias`来添加或修改路径别名。例如，假设我们要为`src/...
vue-echarts环境构建(包成功)
a805814077的博客
07-05 785
适合新手的vue-echarts环境构建教程
Vue_打包并发布项目
a792245795的博客
10-14 262
对当前vue项目进行打包的命令如下： npm run build 打包完成，会输出Build complete并且在vue项目中会生成一个名字为dist的打包文件。
vueCli3测试环境打包js文件目录以及配置
热门推荐
Miss739999536的博客
05-16 1万+
vuecli3已经出来不短时间了，但是我在实际应用当中还是存在一些问题，比如我想打包一个测试环境的包， js被打包至与html同级目录下，虽然这不影响生产环境的打包目录，但这还是给我造成很大的困扰，因为我想要打包后的js文件都是存放在js文件目录下的，so~该如何做呢。 只要我们在vue.config.js里面添加配置就可以了， 加入我们在pakeage.json中指定测试环境mode为...
vue cli3 一键 build 区分测试环境和正式环境
想炒股的前端
06-16 1197
vue cli3 打包 build 区分测试环境和正式环境 通过自定义环境变量文件进行配置 以下是我实际开发中的使用 一、在项目根目录下新建三个配置文件.env .env.development .env.production .env 无论哪个环境都会加载的配置文件 VUE_APP_PUBLIC_PATH=/ VUE_APP_API_BASE_URL=测试域名 .env.development 测试环境加载的配置文件 NODE_ENV=production VUE_APP_CURRENTMOD
不同vue版本下如何分环境打包
weixin_40943147的博客
04-13 1872
前言 假如你的Vue项目需要在多个服务器部署，若使用代理的模式，每个环境都需要先改IP地址及端口，再打包，非常的麻烦 vue2版本（基于webpack）的动态ip及端口分环境打包 在public目录下，新建config.js文件 在config.js文件中编写对应的分别打包环境 把config.js在index.html中引入 创建对应的 .env.dev ， .env.sit ， .env.prod 三个环境 在每个环境中写入对应的环境变量 处理package.json中的sc
vue-cli的打包配置文件
weixin_43989911的博客
06-19 2145
一、vue-cli都做了什么 1、build/dev-server.js 文件 项目node的启动文件，这里面做了webpack配置和node操作， 2、build/webpack.base.conf.js webpack基本配置文件 3、build/webpack.dev.conf.js 开发环境webpack配置 4、build/webpack.prod.conf.js 正式环境的...
vue项目vue.config.js配置打包压缩以及代码分离以及打包后dist文件夹添加时间戳实现更新后无缓存，自动压缩打包后dis文件夹并加上打包时间以及proxy代理
weixin_51406830的博客
03-15 3498
const moment = require('moment'); const TerserPlugin = require('terser-webpack-plugin') const FileManageerPlugin = require('filemanager-webpack-plugin'); const CompressionPlugin = require("compression-webpack-plugin"); module.exports = { configureWebpack
Oasis 物理第四弹：角色控制器驱动人物动画
小王的技术库
09-28 452
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
vue.config.js Vue打包配置详解
qq_47824967的博客
05-25 5561
module.exports = { //基本路径 文件打包后放的位置 publicPath:‘./’， //默认输出文件夹为dist，填入的名字为打包后的文件名 outputDir:‘name’, // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。资源放的目录 assetsDir: “./static”, // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 index的路劲和名字 ind
VUE项目打包配置 vue.config.js 文件
Fiona_lms的博客
03-24 1420
VUE项目打包配置 vue.config.js 文件
vue-cil5项目中配置打包优化vue.config.js完整版
11-16
在Vue CLI 5项目中，`vue.config.js`文件是用于自定义构建配置的地方。以下是一个包含基础打包优化设置的`vue.config.js`文件示例： ```javascript module.exports = { // 基本配置 publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/', // 生产环境下的资源路径 outputDir: 'dist', // 输出目录 // 配置生产环境插件 configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 使用UglifyJsPlugin压缩代码 const uglifyJsPlugin = require('uglifyjs-webpack-plugin'); config.optimization.minimize = true; config.plugins.push(new uglifyJsPlugin({ sourceMap: true, parallel: true, cache: true, compressor: { warnings: false }, })); // 删除不必要的模块 config.module.rules.delete('extract-text-webpack-plugin'); // 如果有使用ExtractTextPlugin，则移除 config.optimization.runtimeChunk = 'single'; // 将runtime单独提取到一个chunk，加快首屏加载速度 } }, // 提升性能的选项 runtimeCompiler: true, // 在浏览器中动态编译Vue实例 productionSourceMap: !process.env.CI, // 生产环境提供source map以便调试 // 构建时的提示信息 devServer: { open: process.platform === 'darwin', // 自动打开浏览器 host: '0.0.0.0', disableHostCheck: true, }, }; //
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值