vue.config.js - 工作笔记

于 2024-01-24 10:11:50 发布
阅读量595 收藏 9
点赞数 7
文章标签： javascript vue.js 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47175934/article/details/135814752
版权

 vue.config.js

代码

以hc项目为例，进行分析

// 基础路径 注意发布之前要先修改这里
const BASE_URL = process.env.NODE_ENV === 'production'
  ? process.env.VUE_APP_ROOT_URL
  : '/'

const cdn = process.env.NODE_ENV === 'production' ?{  
  // 通过cdn方式使用123456
  js: [
    '//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js',
    '//lf9-cdn-tos.bytecdntp.com/cdn/expire-3-M/vuex/3.6.2/vuex.min.js',
    '//lf26-cdn-tos.bytecdntp.com/cdn/expire-3-M/vue-router/3.5.1/vue-router.min.js',
    '//lf3-cdn-tos.bytecdntp.com/cdn/expire-3-M/axios/0.21.1/axios.min.js',
    '//lf26-cdn-tos.bytecdntp.com/cdn/expire-3-M/Sortable/1.13.0/Sortable.min.js',

    //'//cdn.staticfile.org/element-ui/2.15.5/index.min.js',
    // '//cdn.staticfile.org/echarts/5.1.2/echarts.min.js',
    '//cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js',
    // '//cdn.staticfile.org/html2canvas/1.3.2/html2canvas.min.js',
    '//cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js',
  ],
  css: [
    //'//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css',
    //'//cdn.staticfile.org/element-ui/2.15.5/theme-chalk/index.min.css'
    //'/cdn/element-ui/2.15.5/theme-learun/index.css'
  ]
}:{
  js:[
    '/cdn/vue/2.6.14/vue.js',
    '/cdn/vuex/3.6.2/vuex.min.js',
    '/cdn/vue-router/3.5.1/vue-router.min.js',
    '/cdn/axios/0.21.1/axios.min.js',
    //'/cdn/element-ui/2.15.5/index.js',
    '/cdn/sortable/sortable.js',
    '/cdn/echarts/echarts.min.js',
    '/cdn/html2canvas/html2canvas.min.js'
  ],
  css:[
    //'/font/css/font-awesome.min.css',
    //'/cdn/element-ui/2.15.5/theme-learun/index.css'
  ]
}

/*const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}*/

// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  publicPath: BASE_URL, // 根据你的实际情况更改这里
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  parallel:false,
  
  configureWebpack:config =>{
    if (process.env.NODE_ENV !== 'development') {
      return {
          performance: {
          hints: false,
          maxEntrypointSize: 512000,
          maxAssetSize: 512000
        }
      }
    }
  },
  // configureWebpack: config => {
  //     if (process.env.NODE_ENV === 'production') {
  //         return {
  //             plugins: [
  //                 new BundleAnalyzerPlugin()
  //             ]
  //         }
  //     }
  // },
  chainWebpack: (config) => {
    config.plugins.delete('preload') 
    config.plugins.delete('prefetch') 
    // 配置cdn引入
    config.plugin('html').tap((args) => {
      args[0].cdn = cdn;
      return args
    }) 

    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    })

    /*config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                vendor: {
                  minChunks:1,
                  minSize:1,
                  chunks: 'all',
                  name: 'chunk-setting',
                  test: resolve('src/config'), // can customize your rules
                }
              }
            })
        }
      )*/

    const entry = config.entry('app')
    entry
      .add('babel-polyfill')
      .end()
    entry
      .add('classlist-polyfill')
      .end()
    /*entry
      .add('@/mock')
      .end()*/
  }
}
分析

1.BASE_URL：基础路径，用于设置静态资源的访问路径。在生产环境中，会使用VUE_APP_ROOT_URL环境变量的值作为基础路径；在开发环境中（production），基础路径为根路径（/）。

const BASE_URL = process.env.NODE_ENV === 'production'
  ? process.env.VUE_APP_ROOT_URL
  : '/'

 

2.cdn：CDN配置对象，包含两个属性：js和css。在生产环境中，通过CDN方式引入指定的JavaScript和CSS文件；在开发环境中，引入本地的JavaScript和CSS文件。

const cdn = process.env.NODE_ENV === 'production' ?{  
  // 通过cdn方式使用123456
  js: [
    '//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js',
    '//lf9-cdn-tos.bytecdntp.com/cdn/expire-3-M/vuex/3.6.2/vuex.min.js',
    '//lf26-cdn-tos.bytecdntp.com/cdn/expire-3-M/vue-router/3.5.1/vue-router.min.js',
    '//lf3-cdn-tos.bytecdntp.com/cdn/expire-3-M/axios/0.21.1/axios.min.js',
    '//lf26-cdn-tos.bytecdntp.com/cdn/expire-3-M/Sortable/1.13.0/Sortable.min.js',

    //'//cdn.staticfile.org/element-ui/2.15.5/index.min.js',
    // '//cdn.staticfile.org/echarts/5.1.2/echarts.min.js',
    '//cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js',
    // '//cdn.staticfile.org/html2canvas/1.3.2/html2canvas.min.js',
    '//cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js',
  ],
  css: [
    //'//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css',
    //'//cdn.staticfile.org/element-ui/2.15.5/theme-chalk/index.min.css'
    //'/cdn/element-ui/2.15.5/theme-learun/index.css'
  ]
}:{
  js:[
    '/cdn/vue/2.6.14/vue.js',
    '/cdn/vuex/3.6.2/vuex.min.js',
    '/cdn/vue-router/3.5.1/vue-router.min.js',
    '/cdn/axios/0.21.1/axios.min.js',
    //'/cdn/element-ui/2.15.5/index.js',
    '/cdn/sortable/sortable.js',
    '/cdn/echarts/echarts.min.js',
    '/cdn/html2canvas/html2canvas.min.js'
  ],
  css:[
    //'/font/css/font-awesome.min.css',
    //'/cdn/element-ui/2.15.5/theme-learun/index.css'
  ]
}

3. module.exports：导出配置对象，用于配置Webpack的相关选项。其中包括以下配置项：

  • publicPath：公共路径，用于设置静态资源的访问路径。
  • lintOnSave：是否在保存时进行代码检查。在开发环境中开启，以便实时查看代码错误。
  • productionSourceMap：是否生成生产环境的源代码映射文件。在生产环境中关闭，以减小文件大小。
  • parallel：是否使用多进程并行处理资源。在开发环境中关闭，以提高构建速度。
  • configureWebpack：自定义Webpack配置函数。在生产环境中，配置性能优化选项，包括禁用警告、设置最大入口点和资产大小。
  • chainWebpack：链式操作Webpack配置函数。用于修改Webpack配置对象。在这个例子中，删除了预加载和预获取插件，配置了CDN引入，并设置了忽略打包的文件
  • module.exports = {
  publicPath: BASE_URL, // 根据你的实际情况更改这里
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  parallel:false,
  
  configureWebpack:config =>{
    if (process.env.NODE_ENV !== 'development') {
      return {

//configureWebpack中的performance：性能配置对象，用于设置Webpack构建时的性能相关选项。
//在这个例子中，禁用了警告（hints: false），
//并设置了最大入口点和资产大小（maxEntrypointSize: 512000, maxAssetSize: 512000）。
          performance: {
          hints: false,
          maxEntrypointSize: 512000,
          maxAssetSize: 512000
        }
      }
    }
  },



//chainWebpack中的config.plugins.delete('preload')和config.plugins.delete('prefetch')：
//删除预加载和预获取插件，以避免不必要的网络请求。
  chainWebpack: (config) => {
    config.plugins.delete('preload') 
    config.plugins.delete('prefetch') 

    // chainWebpack中的config.plugin('html').tap((args) => {...})：
//配置HTML插件，将CDN配置对象添加到模板中。
    config.plugin('html').tap((args) => {
      args[0].cdn = cdn;
      return args
    }) 

    //忽略的打包文件
//chainWebpack中的config.externals({...})：设置外部依赖，
//避免将这些依赖打包到最终的bundle文件中。在这个例子中，
//排除了vue、vue-router、vuex和axios。
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    })

 //chainWebpack中的const entry = config.entry('app')：
//获取应用程序的入口配置对象，并添加babel-polyfill和classlist-polyfill，以确保兼容性。
    const entry = config.entry('app')
    entry
      .add('babel-polyfill')
      .end()
    entry
      .add('classlist-polyfill')
      .end()
    /*entry
      .add('@/mock')
      .end()*/
  }
}

 部分分析写在代码中了~

normi-D18
关注
【vue.config.js本地服务器代理--留用笔记】vue.config.js本地服务器代理
weixin_46902217的博客
04-02 1302
前言：配置或改动本地代理文件后一定要重启项目
vue.js电商项目--美丽购物街day01首页制作
weixin_46379498的博客
07-18 965
vue.js电商项目--美丽购物街day01首页效果如图划分目录结构vue.config.js配置文件别名App.vue文件router文件下的index.js 首页效果如图 下拉首页 划分目录结构 使用vue-cli3搭建脚手架 vue.config.js配置文件别名 vue-cli3没有vue.config.js,要自行新建此文件 module.exports={ configureWebpack: { resolve: { alias: {
vue.config.js 全局配置
轻风细雨_林木木
03-20 2万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
Blog-创新项目实训——Vue项目部署优化之CDN引入
樱岛麻衣的博客
06-09 1744
CDN 的全称是 ，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。比如 js 有 2 种 引入方式：下载代码文件至本地项目中并引入。通过 CDN（内容分发网络） 引用。使用CDN引用的一个好处：许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点
vue-config.js配置实战
欢迎来到☆槿畔☆的博客
11-15 3万+
今天讲述一下vue-config.js配置，我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如设置代理,打包配置等问题呢?还不会搭建脚手架,点击前往搭建vue-cli3 实际上我们都是可以在vue-config.js中进行配置(刚创建的这个js都是空的),我把官网里面很常见的配置都进行了注释...
Webpack：配置入口(entry)
weixin_41350225的博客
04-17 2885
详解WebpackWebpack的核心概念①入口(entry) Webpack的核心概念 ①入口(entry) 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，webpack 会找出有哪些模块和 library 是入口起点（直接和间接）依赖的 ...
vue.config.js 配置
Lavante的博客
09-01 315
【代码】vue.config.js 配置。
vue.config.js基本配置
qq_35496811的博客
06-15 4237
vue3、vue2基本配置
Vue笔记（六）vue-router
Tml的博客
10-12 730
路由、基本路由、嵌套（多级）路由、路由传参、命名路由、路由的params参数、路由的props配置、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、独享守卫（只有前置，后置用全局守卫）、组件内路由守卫、路由器的两种工作模式
v-sanitize:适用于Vue.js应用的基于白名单HTML清理工具
05-14
v消毒 Vue.js应用程序的基于白名单HTML清理程序（sanitize-html...nuxt.config.js export default { modules : [ [ 'v-sanitize/nuxt' , { /* options */ } ] ] , sanitize : { /* options */ } } 您也可以传递默
vue2.x笔记7-webpack详解(2)
notChange的博客
02-15 740
本文主要包含：webpack配置vue，webpack的plugin，搭建本地服务器以及配置文件分离
Webpack（2）Entry入口
悦涵仙子的技术笔记本
08-23 557
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。 进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。 可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src 对象语法 const config = { entry: { app: './src/app.js', vendor
vue.config.js中打包相关配置
最新发布
前端-尔嵘
01-20 1911
通过对chunk生成的css和js文件数量和大小做限制，对代码进行压缩和分割，线上生产环境下使用cdn方式等对webpack打包优化。
3、vue-cli3项目配置webpack自动删除生产环境的console.log调试信息，附带跨域解决
人与人之间最小的差别是智商，最大的差别是坚持。
07-17 1946
我们都知道项目在编译打包上生产环境的时候是不能有console.log()信息打印输出的，但是我们在开发环境或者是测试环境有时候调试代码又需要打印输出一些信息，我们也不可能在编译上线的时候把代码里面的console.log()一个一个的全部删除掉，这个时候就需要我们在配置文件里面配置一下，生产环境编译的时候自动去掉console.log()。 我们先看下vue-cli3文件结构，webpack相...
vue cli3之vue.config.js 文件配置
qq_45950523的博客
05-27 548
'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } const name = 'vue project' // page title // If your port is set to 80, // use administrator privileges to execute the command line. // For example, Mac
vue-cli3 vue.config.js 配置entry 引入mock..js
yumihe
06-17 8522
使用场景：在开发环境，使用mock.js；在生产环境，不使用mock.js package.json配置： "scripts": { "serve": "cross-env NODE_ENV=development vue-cli-service serve", "build": "cross-env NODE_ENV=production vue-cli-service build", } vue.cofig.js configureWebpack: (config) => {
Vue-cli3 项目配置 Vue.config.js
热门推荐
qq_35167373的博客
06-12 10万+
Vue-cli3 搭建的项目 界面想对之前较为简洁    之前的build和config文件夹不见了，那么应该如何配置 如webpack等的配那只需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录）语法module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // esli...
Webpack之入口起点(Entry Points)学习笔记（2）
我是希希呀的博客
09-26 591
单个入口（简写）语法用法：entry: string|Array<string>//webpack.config.js const config = { entry: './path/to/my/entry/file.js' };module.exports = config;entry 属性的单个入口语法，是下面的简写：const config = { entry: { main:
vue.config.js配置 不生效
09-05
- *1* *2* *3* [Vue学习笔记 —— 关于vue.config.js不生效的解决方案](https://blog.csdn.net/qq_33638188/article/details/125343763)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值