環(huán)境安裝

   npm install -g @vue/cli
   vue create <project-name>

可以選擇你想要安裝的一些配置文件。

image.png

image.png

安裝步驟一步步往下

image.png

對比2.x 少了很多配置文件（build,config文件等里面的xxx)

vue.config.js

const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir)
}
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  runtimeCompiler: true,//是否使用包含運(yùn)行時編譯器的 Vue 構(gòu)建版本
  baseUrl: '',
  productionSourceMap: false, //不在production環(huán)境使用SourceMap
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      }
    }
  },
  lintOnSave: process.env.NODE_ENV !== 'production',
  configureWebpack:(config)=>{
    //入口文件
    config.entry.app = ['babel-polyfill', './src/main.js'];
    //刪除console插件
    let plugins = [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_console:true,
            drop_debugger:true
          },
          output:{
            // 去掉注釋內(nèi)容
            comments: false,
          }
        },
        sourceMap: false,
        parallel: true,
      })
    ];
    //只有打包生產(chǎn)環(huán)境才需要將console刪除
    if(process.env.VUE_APP_build_type=='production'){
      config.plugins = [...config.plugins, ...plugins];
    }
  },
  //允許對內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改。
  chainWebpack: (config) => {
    //命名 
    config.resolve.alias
      .set('SRC', resolve('src'))
      .set('ASSET', resolve('src/assets'))
      .set('VIEW', resolve('src/components/page'))
      .set('COMPONENT', resolve('src/components/common'))
      .set('UTIL', resolve('src/utils'))
      .set('SERVICE', resolve('src/services'));
    //打包文件帶hash
    config.output.filename('[name].[hash].js').end(); 

    //為了補(bǔ)刪除換行而加的配置
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap(options => {
        // modify the options...
        options.compilerOptions.preserveWhitespace = true;
        return options;
      });
  },
  devServer: {//跨域
    port: 8081,// 端口號
    open: true, //配置自動啟動瀏覽器
    proxy: {// 配置跨域處理 可以設(shè)置多個
      '/api': {
        target: 'xxxx',
        ws: true,
        changeOrigin: true
      },
    }
  }
}

環(huán)境變量和模式

這個直接看官方文檔吧，對于區(qū)分環(huán)境的打包，非常便利。

https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

打包發(fā)布與模式的配合

.env.qa

.env.regress

.env.development

.env.production

.env.test

總結(jié)

本次升級還是好處多多的 打包時間，啟動時間，打包之后的包的大小都縮小了一半以上。