vue修改打包配置如何实现代码打包后的自定义命名

目录
  • 修改打包配置实现代码打包后的自定义命名
    • 修改配置后打包为
    • 首先修改router文件
    • 打开项目中的build文件夹
    • 修改js打包的命名方法
    • 修改css打包的命名方法
    • 命名修改如下
    • 图片还有一种情况是
  • vue 修改打包文件名

修改打包配置实现代码打包后的自定义命名

打包后文件

修改配置后打包为

首先修改router文件

例如，这是原本方法引用页面：

//基础配置
import BasicDispose from './pages/BasicDispose/BasicDispose'

现修改为：

const BasicDispose = () => import(/* webpackChunkName: "BasicDispose" */ './pages/BasicDispose/BasicDispose')

注：

/* webpackChunkName: “BasicDispose” */内的BasicDispose是打包后的文件名，可以随意命名，一般是同一文件内的页面认为是一个模块，打包成一个js文件，而这个js文件以这些页面的文件夹名字命名，比较便于理解。

打开项目中的build文件夹

修改js打包的命名方法

webpack.prod.conf.js文件中把

filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

修改为：

filename: utils.assetsPath('js/[name].js?v=[chunkhash]'),
chunkFilename: utils.assetsPath('js/[name].js?v=[chunkhash]')

如下所示：

output: {
    path: config.build.assetsRoot,
    //原始代码设置
    // filename: utils.assetsPath('js/[name].[chunkhash].js'),
    // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    filename: utils.assetsPath('js/[name].js?v=[chunkhash]'),
    chunkFilename: utils.assetsPath('js/[name].js?v=[chunkhash]')
}

修改css打包的命名方法

webpack.prod.conf.js文件中把

filename: utils.assetsPath('css/[name].[contenthash].css'),

修改为：

filename: utils.assetsPath('css/[name].css?v=[contenthash]'),

如要修改图片的打包命名的方法则在

module–rules内关于图片的修改如下图所示修改对应的路径即可

命名修改如下

name: utils.assetsPath('img/[name].[ext]?v=[hash:7]')

图片还有一种情况是

对于小图片，是直接压缩成base64编码的图片，这里可以手动修改limit的设置，这是极限大小的参数，小于极限参数会自动进行压缩，如果将limit的值设的很大，使所有的图片都进行压缩的话，虽然不会涉及到路径的问题，但是会使浏览器压力很大,页面的相应时间会有影响。

vue 修改打包文件名

修改配置文件 webpack.prod.conf.js

output: {
  publicPath: './',
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].js'),
  chunkFilename: utils.assetsPath('js/[id].js')
},
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].css'),

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue项目的构建，打包，发布全过程

    详解vue项目的构建，打包，发布全过程

    很多朋友对于VUE项目的一系列流程不熟悉,小编根据网友提出的问题,整理了关于vue项目的构建打包发布全过程,希望对你有用. 一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博客. 现在就有我来说说如何讲vue项目发布到github上 之前写过vue环境搭建 可以参考: vue环境搭建 二.vue项目的打包 1.大家都知道使用npm run bui

  • 修改Vue打包后的默认文件名操作

    一,问题 因为我想在我的服务器上部署两个vue项目,但是vue打包后默认的项目名是dist,这样子就跟我上一个vue项目冲突了.因此查了一下资料. 二,解决方案 进入config ⇒ index.js,在build中将dist关键字改成其他名称即可. 补充知识:vue 打包后文件命名 在 confige文件中的 index 以上这篇修改Vue打包后的默认文件名操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue组件命名和props命名代码详解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <script src="https://cdn.jsdelivr.n

  • vue修改打包配置如何实现代码打包后的自定义命名

    vue修改打包配置如何实现代码打包后的自定义命名

    目录 修改打包配置实现代码打包后的自定义命名 修改配置后打包为 首先修改router文件 打开项目中的build文件夹 修改js打包的命名方法 修改css打包的命名方法 命名修改如下 图片还有一种情况是 vue 修改打包文件名 修改打包配置实现代码打包后的自定义命名 打包后文件 修改配置后打包为 首先修改router文件 例如,这是原本方法引用页面: //基础配置 import BasicDispose from './pages/BasicDispose/BasicDispose' 现修改为:

  • vue cli 3.0通用打包配置代码,不分一二级目录

    1.项目根目录下新建vue.config.js,进行如下配置即可 module.exports={ publicPath:'', }; 补充知识:Vue-CLI3.0更改打包配置 在实际项目开发中,我们一般会直接使用vue.vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题. 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修

  • Vue Cli3 打包配置并自动忽略console.log语句的方法

    下载插件 npm i -D uglifyjs-webpack-plugin 在 vue.config.js 引入使用 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { configureWebpack: { plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, }, }, }), ],

  • 在vue项目中配置你自己的启动命令和打包命令方式

    在vue项目中配置你自己的启动命令和打包命令方式

    目录 配置自己的启动命令和打包命令 准备 vue项目启动命令的配置与切换 vue启动命令的切换npm run dev和npm run serve配置 修改方法 配置自己的启动命令和打包命令 在开发中,通常会需要和后台做一些开发调试, 本地开发, 和线上观测 这时 如何用一套代码 加上 几个命令来轻松的做到这些? 准备 首先除vue项目外 我们还需要安装几个额外的包来帮助我们 这只是在 vue-cli2 中的配置 当然 vue-cli3 也可以通过如下方法来配置一些环境 npm i cross-e

  • Vue工程模板文件 webpack打包配置方法

    1.github github地址:https://github.com/MengFangui/VueProjectTemplate 2.webpack配置 (1)基础配置webpack.base.config.js const path = require('path'); //处理共用.通用的js const webpack = require('webpack'); //css单独打包 const ExtractTextPlugin = require('extract-text-webp

  • 详解Vue快速零配置的打包工具——parcel

    本文介绍了Vue快速零配置的打包工具--parcel,分享给大家,具体如下: 特性 快速打包 打包所有资源 自动转换 代码拆分 模块热替换 友好的错误记录 如何工作 Parcel 将 资源 树转换成 包(bundles) 树.许多其它的打包工具基本上是基于 JavaScript 资源,还有附加在其上的其它格式的资源.例如,在 JS 文件中内联成字符串. Parcel是对文件类型无感知的,它能按你所期待的方式那样与任意类型的资源工作,且毋须配置. 构建资源树 Parcel 接受单个入口资源作为输入

  • 使用vue-cli3打包dist路径问题修改打包配置

    目录 在vue.config.js目录下配置 vue-cli3打包注意路径的问题 在vue.config.js目录下配置 module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.did

  • Vue在外部配置打包文件夹名称和url地址前缀

    Vue在外部配置打包文件夹名称和url地址前缀

    在public中添加以下两个js文件 config_build.js: module.exports = { //打包文件夹名 OUTPUT_DIR: 'test', //浏览器url地址前缀.需要同步更改config_settings.js中的ROUTE_PREFIX ROUTE_PREFIX: '/test/' } vue.config.js: const config_build = require('./public/config_build') module.exports = { p

  • vite + electron-builder 打包配置详解

    目录 创一个vite项目 安装打包工具 配置桌面环境 创建 主进程 main.js 添加electron 运行命令 打包项目,生成dist 解决资源无法加载 开发环境:热更新 两个工具 concurrently wait-on 打包exe 解决index.html找不到的问题 创一个vite项目 npm init vite 安装打包工具 npm i -D electron // 20.1.0 npm i -D electron-builder // 23.3.3 electron是开发时运行环境

  • Webpack 服务器端代码打包的示例代码

    环境变量 之前,我们在项目里会经常使用 process.env.NODE_ENV, 但这个变量对于 webpack打包是有影响的, 在 production 的时候是有优化的. 所以, 我们将改用其他的环境变量来区别: new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', 'process.env.API_ENV': `"${process.env.API_ENV || 'development'

随机推荐