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
}
複製代碼