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',
                        }
                    ]
                }
            }))
        }
    },