@How much do you know about Vue / cli configuration – publicpath, outputdir, assetsdir, indexpath, filenamehashing, configurewebpack, productionsourcemap

Time:2022-4-28

vue. config. JS

vue. config. JS is an optional configuration file,
This file exists in the root directory of the project (the same level as package. JSON).
By default, there is no such file. We need to create it manually
Then it will be automatically loaded by @ Vue / cli service.

module.exports={
    Productionsourcemap: false, // production environment map resource. The default value is true. JS will not generate the corresponding Map file
    publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
}
Points needing attention
In publicpath/ Contention for hash path/ It's history
So it's a relative path, and the package is. /. /. First/ It's for hash mode
After packing, it's actually/ Point to. Instead of. //

Baseurl or publicpath relative path packaging

Deprecated since Vue cli 3.3, please use publicpath.
module.exports={
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
}
At this time, the reference of the production environment is the relative path

Outputdir output directory after packaging

module.exports = {
  publicPath: './', //  Basic path
  Outputdir: 'dist', // output file directory
}

assetsDir

Assetsdir: set the directory where the static resources (JS, CSS, IMG, fonts) generated by packaging are placed.
If you change the value of assetsdir: 'assets' to assetsa.
Your development environment value is introduced in this way  
When you pack it, it will automatically become   
It doesn't need to be changed manually. Is it very friendly?
module.exports = {
  publicPath: './', //  The basic path is a relative path 
  Outputdir: 'dist', // output file directory
  Assetsdir: 'assets' // the default value of assetsdir is assets. If we change to assetsa. The production environment is assetsa
}

indexPath

Indexpath: used to set the index generated by packaging The name of the HTML file
Default value indexpath: 'index html'

module.exports={
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
    Outputdir: 'dist', // output file directory
    Assetsdir: 'assetsa', // set and place the static resources generated by packaging
    indexPath: 'indexdemo1. Htm '// original index HTML will become indexdemo1 html
}

filenameHashing

Whether to add hash to the file name of the static resource generated by packaging in order to control the browser cache problem.
Filenamehashing: true, // this value is true by default and has a hash value At each deployment, we want to have a hash value
Filenamehashing: false, // the file of static resource has no hash value

module.exports={
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
    Outputdir: 'distahtml', // output file directory
    Assetsdir: 'assetsa', // set and place the static resources generated by packaging
    indexPath: 'indexdemo1.html',
    Filenamehashing: false, // no hash value
}


Configurewebpack configuration alias

const path = require('path');// The path module is introduced to configure the alias
module.exports = {
    publicPath: process. env. NODE_ ENV === 'production' ? './' : './', // Relative path
    Outputdir: 'distahtml', // output file directory
    Assetsdir: 'assetsa', // set and place the static resources generated by packaging
    indexPath: 'indexdemo1.html',
    Filenamehashing: false, // there will be no hash value after packaging
    //Functions for configuring aliases
    configureWebpack: (config) => {
    //Config is the resolved configuration
        Object.assign(config, {
        //Develop and produce common configuration and add some alias settings
            resolve: {
                //Alias configuration
                alias: {
                    '@c': path.resolve(__dirname, './src/components'),
                    '@v': path.resolve(__dirname, './src/views'),
                    //You need to configure this. If not, it will report an error. Use @ in the project to introduce something that may report an error
                    '@': path.resolve(__dirname, './src'),
                } 
            }
        })
    }
}

How to use it in the page


//When we introduced it, we were using aliases. After testing, development and production, there was no problem
import HelloWorld from '@/components/HelloWorld.vue'
import TestCom from "@c/test-com.vue"
export default {
  name: 'Home',
  components: {
    HelloWorld,
    TestCom
  },

Productionsourcemap (production environment map resource)

What is productionsourcemap?
What I understand: productionsourcemap is the map resource of production environment, and its function is positioning.
You can locate the location of the browser console output statement in the project file.

Productionsourcemap: its value is Boolean, and the default value is true.
You can set it to false to speed up the build of your production environment.

Set productionsourcemap: true.
We can clearly know which file and where the output statement is located
And JS will be generated Map file. CSS is not generated Map file

Productionsourcemap: set to true

Set productionsourcemap: true.
We can clearly know which file and where the output statement is located
And JS will be generated Map file. CSS is not generated Map file


Productionsourcemap: set to false

Set productionsourcemap: false.
We don't know which line of code the output statement is on
And JS will not be generated Map file.
Set to false to speed up the production environment build


Recommended Today

Vue3+TS+VueI18n internationalization problem

When Vue3 + TS + VueI18n (9.2.0) is internationalized, in<script setup>中直接使用t(‘Common.pleaseChoose’)时,发现值为空串的问题 The internationalization configuration looks like this: When used it looks like this: After debugging and viewing the source code, I found that inonBeforeMountandonMountedIt is no problem to use in