Vue-Cli 3.0 + vue.config.js

     虽然一直没有亲手搭建过vue项目，可是2.0的时候就开始自学（但并无实践项目）。而后公司最近有我的用3.0作了个项目，公司让我参与进去，我就顺便学习了一把3.0。（美滋滋）

    由于电脑的环境仍是以前自学时候的2.0，所以如今须要先升级到3.0。下面是具体步骤：

    1. npm uninstall -g vue-cli

    2. npm install -g @vue/cli

    3. vue create [new-dir]    //进去后会有一些选择让你作，我选的default，而后下载用选npm

    4. cd [new-dir] 

    4. npm run serve 

    至此3.0版本的项目就初始化好。能够看到目录结构真的是很是的精简。我参考同事已经作好的项目，是多了几个文件，分别是：

      1.  vue.config.js

      2. .env & .env.development & .env.[其余环境]

 

   下面就讲下vue.config.js  (一个配置文件，替代了2.0的webpack.config.js)

  官方说vue.config.js是一个可配的文件，若是存在（与package.json同级）,会被@vue/cli-service自动加载

  功能：完成关于端口号的配置，打包以后的路径配置，图片的配置等。

  i:chainWebpack

    容许对内部webpack配置作更细粒度的修改，好比修改、增长loader（链式操做）

chainWebpack:config=>{
   config.module.rule('xx').tap( () => {return {key:val,key:val}} )   //修改loader选项
   config.module.rule('xx').end()    //添加一个新的loader
   config.plugin('xx').tap( args => { ...; return args} )    //修改插件选项
}

ii:configureWebpack

     调整webpack配置（development(开发)/production(生产)）

     若是须要基于环境有条件的配置，或者想直接修改配置，就能够返回一个函数，参数会收到已解析好的而配置，在函数内可直接改配置

 configureWebpack: config => {

if (process.env.NODE_ENV === 'production') {
           //xxxxx
        }else if(process.env.NODE_ENV==='development'){
           //xxxx
        }
    },

 iii:css

   css的处理

css: {
        loaderOptions: {   //向css相关的loader传递选项 设置后每一个sass文件都会预加载这两个文件
            sass: {
                data: `@import "@/env/${process.env.VUE_APP_PROJECT_ENV}/css/_variables.scss"; 
                       @import "@/css/_variables.scss";`   
            }
        }
    }

 //声明变量具体的值（主题文件夹下的css文件夹）

$variable-color-theme: #ff8c05;
$variable-color-theme-deeper: #ff7505;
$variable-color-theme-disabled: #f7d5b1;

//主题色是变量（外层css文件夹）

$color-theme: $variable-color-theme;
$color-theme-deeper: $variable-color-theme-deeper;
$color-theme-disabled: $variable-color-theme-disabled;

iv: productionSourceMap:false

   若是设置成false，项目在打包后是会压缩加密的，运行速度会加快，可是运行时报错是没法得知

   若是设置成ftrue, 项目会加载所有源码，则会具体显示运行时的报错，运行速度会变慢，并且暴露了源码

  v: vue-loader+transformAssetUrls

    vue-loader: 解析和转换.vue文件，提取出其中的逻辑代码js/css/html，再分别把他们交给对应的loader去处理

    transformAssetUrls: 模板编译中，编译器将某些资源的某些属性转成可被调用（etc: img的src属性），使得这些资源能够被webpack处理

 chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(() => {
                return {
                    transformAssetUrls: {
                        video: ['src', 'poster'],
                        source: 'src',
                        img: 'src',
                        image: 'xlink:href'
                    }
                }
            })
    }

   vi：声明新的路径变量 @env

   如下@env表明的路径变量为src/env下的，若是是esim环境，就在/esim目录里，若是是wesim环境，就在/wesim目录里

   用于：在不一样环境下，可能同一位置上引入的组件内容不同，用于导入这些组件的时候，声明路径

configureWebpack: config => {
        Object.assign(config.resolve.alias, {'@env': path.resolve(`src/env/${process.env.VUE_APP_PROJECT_ENV}`)})
     
    } 

 vii：filemanager-webpack-plugin

      用于：在build以前及以后复制、打包、移动、删除文件以及文件夹

const FileManagerPlugin = require('filemanager-webpack-plugin')
 configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.plugins.push(new FileManagerPlugin({
                onEnd: {
                    archive: [
                        {
                            source: './dist',
                            destination: `./dist/${process.env.VUE_APP_DOMAIN}-${packageInfo.version}.tar`,
                            format: 'tar',
                        }
                    ]
                }
            }))
        }
    },