vue-2.0的vue-cli安裝：

使用腳手架工具 vue-cli 可以快速地構建專案

安裝過程：

1、全域性安裝 ： npm install -g vue-cli

2、初始化webpack: vue init webpack my-test(工程名稱)

3、根據提示走

4、進入你的工程目錄 ： cd my-test

5、下載所有配置檔案的內容： npm install

6、熱載入（啟動伺服器）： npm run dev

注：第六步如果報錯，node.js版本問題所導致，重新下載一個新的版本；

vue-3.0的vue-cli：

1.環境變數相關

在一般專案中我們針對不同的開發環境會配置不同的環境變數：

• 開發環境（development）
• 測試環境(production)
• 釋出環境（release）
• 1.在專案根目錄下新建三個檔案：.env.development，.env.production，.env.release

//.env.development
NODE_ENV=development
VUE_APP_XXX=XXX
...

//.env.production
NODE_ENV=production
VUE_APP_XXX=XXX

outputDir=dist

//.env.release
NODE_ENV=production
VUE_APP_XXX=XXX

outputDir=release
 

• 2.vue.config.js配置

module.exports={
    ...
    outputDir: process.env.outputDir,
    ...
}

3.package.json配置

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "release": "vue-cli-service build --mode release",
    "lint": "vue-cli-service lint"
  },

4.打包命令

• 打包測試版本：npm run build

• 打包正式版本：npm run release

  打包好的檔案分別放在dist/release中

2.專案中配置目錄別名alias

修改vue.config.js

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports={
    ...
    //  將接收ChainableConfig由webpack-chain提供支援的例項的函式。
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets',resolve('src/assets'))
            .set('components',resolve('src/components'))
    },
    ...
}

3.webpack代理配置相關

修改vue.config.js

module.exports={
   ...
  //  代理相關配置
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // string | Object
  },
  ...
}

4.打包檔案優化

1.安裝外掛

• uglifyjs-webpack-plugin //去除console
• compression-webpack-plugin //gzip壓縮

npm install --save -dev uglifyjs-webpack-plugin compression-webpack-plugin

2.vue.config.js配置

//去console外掛
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//gzip壓縮外掛
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports={
  ...
  //  webpack外掛配置
  configureWebpack: config => {
    let plugins = [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_debugger: true,
            drop_console: true,
          },
        },
        sourceMap: false,
        parallel: true,
      }),
      new CompressionWebpackPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
          '\\.(' +
          ['js', 'css'].join('|') +
          ')$',
        ),
        threshold: 10240,
        minRatio: 0.8,
      }),
    ]
    if (process.env.NODE_ENV !== 'development') {
      config.plugins = [...config.plugins, ...plugins]
    }
  },
  ...
}

5.vue.config.js完整預設配置

可直接拷貝到自己專案中自定義修改

module.exports = {
     // 基本路徑
     baseUrl: '/',
     // 輸出檔案目錄
     outputDir: 'dist',
     // 用於巢狀生成的靜態資產（js，css，img，fonts）的目錄。
     //assetsDir: '',
     // 以多頁模式構建應用程式。
     pages: undefined,
     // eslint-loader 是否在儲存的時候檢查
     lintOnSave: true,
     // 是否使用包含執行時編譯器的Vue核心的構建。
     runtimeCompiler: false,
     // 預設情況下babel-loader忽略其中的所有檔案node_modules。
     transpileDependencies: [],
     // 生產環境sourceMap
     productionSourceMap: true,
     // webpack配置
     configureWebpack: () => {},
     chainWebpack: () => {},
     // css相關配置
     css: {
      // 啟用 CSS modules
      modules: false,
      // 是否使用css分離外掛
      extract: true,
      // 開啟 CSS source maps?
      sourceMap: false,
      // css預設器配置項
      loaderOptions: {},
     },
     // webpack-dev-server 相關配置
     devServer: {
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null, // 設定代理
      before: app => {}
     },
     // enabled by default if the machine has more than 1 cores
     parallel: require('os').cpus().length > 1,
     // PWA 外掛相關配置
     pwa: {},
     // 第三方外掛配置
     pluginOptions: {
      // ...
     }
}

未完待續…