1. Uninstall vue-CLI

npm uninstall -g vue-cli
Copy the code

2. Install the new version of Vuecli3

npm install -g @vue/cli
Copy the code

3. Create a new project

vue create vue-demo
Copy the code

4. Select default as the template

5. Project Structure:

6. Run NPM run serve to start the service

7. Configure webPack and create a file vue.config.js in the root directory

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:falseChainWebpack: 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(The '@', 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({// enable Gzip compression filename:'[path].gz[query]',
            algorithm: 'gzip'.test:productionGzipExtensions, threshold: 10240, minRatio: 0.8}), new BundleAnalyzerPlugin()}}}, devServer: {open:true// Whether the browser page is automatically opened'127.0.0.1'// Specify the use of a host. The default is localhost port: 8083, // port address HTTPS:false// use HTTPS to provide service proxy: {'/repos': {
        target: 'https://api.github.com',
        changeOrigin: true
      }
    },
    progress: true,
    before: app => {}
  }
}
Copy the code

8 Define global variables to create a build folder. Let’s create a new file called index.js

// public const common = {APP_NAME:'CMAS'}; module.exports = { dev: { env: { TYPE: JSON.stringify('dev'),
      ...common
    }
  },

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

NPM I — save@babel /polyfill

main.js

import '@babel/polyfill'
Copy the code

babel.config.js

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