@vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap

从 Vue CLI 3.3 起已弃用，请使用 publicPath 。
module.exports={
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
}
这个时候生产环境的引用就是相对路径
<img alt="Vue logo" src="./assetsA/logo.png">

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
}

assetsDir:设置放置打包生成的静态资源 (js、css、img、fonts) 的目录。
如果你将 assetsDir: 'assets'的值更改为 assetsA 后。
你开发环境值这样引入的  <img alt="Vue logo" src="../assets/logo.png">
你打包后自动变会变成   <img alt="Vue logo" src="../assetsA/logo.png">
不需要手动去更改的，是不是非常的友好呢？
module.exports = {
  publicPath: './', // 基本路径是相对路径 
  outputDir: 'dist', // 输出文件目录
  assetsDir: 'assets' //默认是assetsDir的值是assets。如果我们改为assetsA。生产环境就是assetsA了
}

indexPath:用于设定打包生成的 index.html 文件的名称
默认值 indexPath: 'index.html'
module.exports={
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
    outputDir: 'dist', // 输出文件目录
    assetsDir: 'assetsA',//设置放置打包生成的静态资源
    indexPath: 'indexdemo1.htm' //原来的index.html会变成indexdemo1.html
}

打包生成的的静态资源的文件名中是否加入hash以便控制浏览器缓存问题。
filenameHashing: true, //这个值默认为true有哈希值.在每次部署的时候，我们是希望有哈希值的哈
filenameHashing: false, //静态资源的文件没有哈希值
module.exports={
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
    outputDir: 'distAhtml', // 输出文件目录
    assetsDir: 'assetsA',//设置放置打包生成的静态资源
    indexPath: 'indexdemo1.html',
    filenameHashing: false, //不会有哈希值
}

const path = require('path');//引入path模块,在配置别名的时候需要哈
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : './', //相对路径
    outputDir: 'distAhtml', // 输出文件目录
    assetsDir: 'assetsA',//设置放置打包生成的静态资源
    indexPath: 'indexdemo1.html',
    filenameHashing: false, //打包后不会有哈希值
    // 配置别名的函数
    configureWebpack: (config) => {
    // config为被解析的配置
        Object.assign(config, {
        // 开发生产共同配置，新增一些别名设置
            resolve: {
                // 别名配置
                alias: {
                    '@c': path.resolve(__dirname, './src/components'),
                    '@v': path.resolve(__dirname, './src/views'),
                    // 这个你需要配置一下，否者会报错项目中使用@引入有可能会报错的哈
                    '@': path.resolve(__dirname, './src'),
                } 
            }
        })
    }
}
在页面中如何去使用
<HelloWorld msg="Welcome to Your Vue.js App"/>
<TestCom></TestCom>
//引入的时候我们在使用别名，经过测试，开发和生成都没有问题
import HelloWorld from '@/components/HelloWorld.vue'
import TestCom from "@c/test-com.vue"
export default {
  name: 'Home',
  components: {
    HelloWorld,
    TestCom
  },