编程知识 cdmana.com

vue.config.js

3.x Our scaffolding encapsulates webpack Most configurations , Make the generated project clearer , But in the development, there will inevitably be their own personality needs , To add your own project configuration , At this point, just create a new one in the root of the project vue.config.js File can ,

module.exports = {
   // Package file output path , That is, where to pack 
  outputDir: 'dist',
  //  Static resource address 
  assetsDir: 'static',
  // eslint-loader  Check when saving 
  lintOnSave: false, 
  //  Whether the production environment is generated  sourceMap  file 
  productionSourceMap: false, 
  filenameHashing: true, // file hash
 
  // chainWebpack  This library provides a  webpack  The upper abstraction of the original configuration , Make it possible to define a named  loader  The rules 
  //  And named plug-ins , It can be called in chain through some methods provided by it , stay cli-service This plug-in is used in 
  chainWebpack: () => {},
 
   /* 
    configureWebpack It's adjustment webpack The easiest way to configure , It can be added or covered cli Configuration in .
     It can be an object : By  webpack-merge  Merge into webpack  Go to the settings of 
     It can also be a function : If you need to configure behavior conditionally based on the environment , You can do some logic processing , It can be directly modified or 
 New configuration ,( This function is lazy to execute after the environment variable is set ). The first parameter of this method will receive the parsed configuration .
     Within the function , You can change the configuration directly , Or return an object that will be merged .
  */
   configureWebpack: {}   //  Objects form   Or the following function form 
   configureWebpack:config=>{}  // Function form   
}

This configureWebpack It can also be in the form of a function .

Practice :
1. To configure import and require Equal path alias

1.1 Use  chainWebpack Method

const path = require('path');
function resolve (dir) {
  // Use here path.resolve  or path.join  It can be adjusted by itself 
  return path.join(__dirname, dir)
}
module.exports = {
  devServer: {
   ...
  },
  lintOnSave: false, // eslint-loader  Check when saving 
  productionSourceMap: false, //  Whether the production environment is generated  sourceMap  file 
  filenameHashing: true, // file hash
  chainWebpack: config => {
    config.resolve.alias
      // key,value Self defined , such as .set('@assets', resolve('src/assets'))
      .set(key,value)
  }
}

1.2  Use configureWebpack Method

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  devServer: {
     ...
  },
  lintOnSave: false, // eslint-loader  Check when saving 
  productionSourceMap: false, //  Whether the production environment is generated  sourceMap  file 
  filenameHashing: true, // file hash
  configureWebpack: {
    resolve: {
      alias: {
        '@assets': resolve('src/assets')
      }
    }
  },
} 

Function form
 

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  devServer: {
     ...
  },
  // eslint-loader  Check when saving 
  lintOnSave: false, 
  //  Whether the production environment is generated  sourceMap  file 
  productionSourceMap: false,
  // file hash
  filenameHashing: true, 
  configureWebpack: config => {
     if (isProduction) {
         ...
     } else {
       ...
     };   
    // 0. Directly modifying   Object properties   To configure 
     config.resolve.alias['@asset'] = resolve('src/assets')
    
    // 1. perhaps return  The form can be 
     return {
       resolve: {
         alias: {
          '@asset':resolve('src/assets')
         }
       }
     }  


  }
}

2. 

版权声明
本文为[Dongdong notes]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225120653033s.html

Scroll to Top