Common Settings of vue.config.js

Record the common Settings of vue.config.js for easy use.

The code in vue.config.js exports an object through module.exports as a whole, and all we do is configure the options in it

// exports through module.exports
module.exports = {}
Copy the code

1.publicPath

Configure the path for packaging. The default value is ‘/’, meaning that the access path does not change after packaging.

When the value is changed to ” or ‘./’, the packaged path becomes relative and can be deployed on any path.

Some scenarios are used in combination with env, for example:

publicPath: process.env.NODE_ENV === "production" ? "/v2" : "/".Copy the code

2.outputDir

The name of the folder to pack, dist by default.

Can also be used with env:

outputDir: process.env.outputDir || 'dist'
Copy the code

3.assetsDir

Folder names for static resources js, CSS, IMG, fonts (relative to outputDir path).

assetsDir: 'static'
Copy the code

4.indexPath

The filename of the ‘index.html’ generated after packaging (relative to the outputDir path).

indexPath: 'index.html'
Copy the code

5.lintOnSave

Whether to use eslint-Loader in the development environment to save lint code every time. The value of it can be a Boolean | ‘warning’ | ‘default’ | ‘error’

lintOnSave: process.env.NODE_ENV ! = ='production'
Copy the code

6.chainWebpack

Is a function that takes a Webpack-chain-based ChainableConfig instance. Allows for more fine-grained changes to the internal WebPack configuration.

Vue-Cli official website is quoted above. Click on the link to jump to webpack-chain’s Github introduction.

We use it most of the time to configure quick paths to reference resources.

chainWebpack: config= > {
  config.resolve.alias // Add an alias
    .set(The '@', resolve('src'))
    .set('@assets', resolve('src/assets'))
    .set('@components', resolve('src/components'))
    .set('@views', resolve('src/views'))
    .set('@store', resolve('src/store'));
},
Copy the code

7.css

Configure CSS, this is an object, mainly look inside the configuration items.

7.1. The extract

Whether to use CSS to separate ExtractTextPlugin. The general purpose of this plugin is to separate CSS styles and prevent the loading of packaged styles from being distorted.

css:{
  extract: true
},
Copy the code

7.2. RequireModuleExtension

You can remove the ‘.module’ from the file name using CSS Modules

css:{
  requireModuleExtension: true
},
Copy the code

css:{
  loaderOptions: {css: { // The options here are passed to csS-loader
      
    },
    postcss: { // The options here are passed to postCSS-loader
      plugins: [require('tailwindcss'), require('autoprefixer')]},scss: {
      // The options here are passed to sass-loader
      // Load the global style
      prependData: `@import "~@/assets/css/global.scss"; `
    },
    less: {
      // The options here are passed to less-loader
      // Define a global object that can be added to a global variable
      globalVars: {
        primary: '#06c'}}}},Copy the code

devServer: {
  host: "0.0.0.0"./ / the local host
  port: 3000.// Set the port number
  https: false.// Whether to enable HTTPS
  open: false.// Whether the browser is automatically opened when the service is started
  hotOnly: true.// Whether to enable hot update
  overlay: { // Page full screen overlay when compiling error
    warnings: false.errors: true
  },
  proxy: 'http://localhost:4000' // Set the proxy
}
Copy the code

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:4000'.// Proxy address
      ws: true./ / support websocket
      changeOrigin: true}}}Copy the code

configureWebpack: {
  name: 'some title'.resolve: {
    alias: {
      "@": resolve("src"),}}},Copy the code