Vuecli3开发环境搭建

1.先卸载原先全局安装的vue-cli

npm uninstall -g vue-cli

2.安装新版vuecli3

npm install -g @vue/cli

3.新建一个项目

vue create vue-demo

4.选择模板：default即可

5.项目结构：

6.执行 npm run serve启动

7.配置webpack,根目录下新建一个文件vue.config.js

const path=require('path')
const merge = require('webpack-merge')
const { DefinePlugin } = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const isPro = process.env.NODE_ENV === 'production'
const configs=require('./build/index.js')
const cfg = isPro ? configs.build.env : configs.dev.env
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports= {
  baseUrl: '/',
  outputDir: 'dist',
  lintOnSave:false,
  productionSourceMap:false, // 生产环境下不开启以优化项目
  chainWebpack: config => {
      config.resolve.symlinks(true);
      config.module.rule('images').use('url-loader').tap(options =>
        merge(options, {
          limit:1024,
        })
      )
      config.plugin("html").tap(args => {
        args[0].chunksSortMode = "none";
        return args;
      });

      config.resolve.alias
        .set('@', resolve('src'))
        .set('_assets', resolve('src/assets'))
        .set('_api', resolve('src/api'))

      config.plugin('define').tap(args => {
        let name = 'process.env';
        args[0][name] = merge(args[0][name], cfg)
        return args
      })
  },
  configureWebpack: config => {
    if (isPro) {
      return {
        plugins: [          
          new CompressionWebpackPlugin({ // 开启 Gzip 压缩
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test:productionGzipExtensions,
            threshold: 10240,
            minRatio: 0.8
          }),         
          new BundleAnalyzerPlugin() // 使用包分析工具
        ]
      }
    }
  },

  devServer: {
    open: true, // 是否自动打开浏览器页面
    host: '127.0.0.1', // 指定使用一个 host。默认是 localhost
    port: 8083, // 端口地址
    https: false, // 使用https提供服务
    proxy: {
      '/repos': {
        target: 'https://api.github.com',
        changeOrigin: true
      }
    },
    progress: true,
    before: app => {}
  }
}

8 定义全局变量
新建build文件夹。下面新建一个文件index.js

// 公共变量
const common = {
  APP_NAME:'CMAS',
};
module.exports = {

  dev: {
    env: {
      TYPE: JSON.stringify('dev'),
      ...common
    }
  },

  build: {
    env: {
      TYPE: JSON.stringify('prod'),
      ...common
    }
  }
}

9 配置babel，兼容IE 配置babel.config.js
安装 npm i --save @babel/polyfill

main.js

import '@babel/polyfill'

babel.config.js

const plugins = [];
module.exports = {
  presets: [["@vue/app",{"useBuiltIns": "entry"}]],
  plugins: plugins
}