vue-cli 3.x搭建項目以及其中vue.config.js文件的配置

1、項目的基本創建（官方文檔：https://cli.vuejs.org/zh/guide/）

• 安裝@vue/cli

  1、卸載vue-cli 2.x版本
       npm uninstall vue-cli -g
  
  2、安裝@vue/cli 3.x版本
       npm install  -g @vue/cli
  
  3、查看版本號
       vue  --version   或者    vue  -V

• 特點
  • 移除了配置文件目錄，config 和 build 文件夾；
  • 移除了 static 文件夾，新增 public 文件夾，並且 index.html 移動到 public 中；
  • 在 src 文件夾中新增了 views 文件夾，用於分類 視圖組件 和 公共組件；
  • 部分命令行發生變化：創建項目、運行項目
• 創建項目的步驟
  • 創建項目文件

    vue  create 項目名稱     在2.x版本中  為   vue init webpack

  • 選擇配置（第一個第二個為你之前安裝的項目配置，第三個為默認配置（什么配置都沒有，例如路由），第四個為自行配置，建議選第四個）

                     

• • 自行選擇安裝配置（如果不熟悉模塊代表了什么，可以先按照下圖選擇）

    這個自行選擇配置，按上下鍵切換目標選項，按空格鍵勾選和取消，按a全選，按i反選，選好后回車確定
    
    1、Babel，轉譯成瀏覽器可識別的語言，可以讓你的項目支持最新的語法，如es6\es7等
    2、TypeScript，新增的選項卡
    3、PWA，模擬原生app，漸進式網絡應用程序（漸進式增強WEB應用）
    4、路由
    5、vuex管理模式
    6、css預處理語言
    7、代碼規范
    8、組件單元測試
    9、端對端測試，模擬用戶真實場景

                     

• • 選擇路由模式（一般選擇hash  yes代表history）

                     

• • 選擇css預處理語言

                     

• • 選擇代碼規范配置

                     

• • 是否保存當前配置信息（第一個為保存，由於我是演示一下，所以就不保存了）

                    

• • 選擇babel,postcss,eslint配置文件存放位置（建議第一個）
  • 最后狀態為：

                     

• • 最后是否將配置項保存為預設，配置完成，生成項目；
  • 運行項目：

    npm run serve    vue 2.x中的啟動方式為npm  run  dev

2、vue.config.js文件

• 前言

  在使用vue-cli3創建項目后，因為webpack的配置均被隱藏了，當你需要覆蓋原有的配置時，則需要在項目的根目錄下，新建vue.config.js文件，來配置新的配置。

• 基本配置：這里貼一個我常用的

  'use strict'
  const glob = require('glob')
  const userConfig = require('./src/config/user.config.js')
  const os = require('os')
  const webpack = require('webpack')
  const pages = {}
  //獲取本機ip
  const network = os.networkInterfaces()
  let localhost = ''
  Object.keys(network).forEach(outerKey => {
      if (outerKey == 'WLAN' || outerKey == '以太網') {
          Object.keys(network[outerKey]).forEach(innerKey => {
              if (network[outerKey][innerKey].family == 'IPv4') {
                  localhost = network[outerKey][innerKey].address
              }
          })
      }
  })
  glob.sync('./src/pages/**/app.js').forEach(path => {
      const chunk = path.split('./src/pages/')[1].split('/app.js')[0]
      pages[chunk] = {
          entry: path,
          template: 'public/index.html',
          filename: `${chunk}.html`,
          chunks: ['chunk-vendors', 'chunk-common', chunk]
      }
  })
  module.exports = {
      baseUrl: process.env.NODE_ENV === 'production' ? dossierConfig.PRO_PUBLIC_PATH : dossierConfig.DEV_PUBLIC_PATH,
      outputDir: `dist${dossierConfig.PRO_PUBLIC_PATH}`,
      pages,
      runtimeCompiler: true,
      productionSourceMap: false,
      lintOnSave: false,
      devServer: {
          host: localhost,
          port: 8022,
          open: true,
          proxy: {
              '/user': {
                  target: 'http://10.0.0.0:8899',
                  ws: true,
                  changeOrigin: true,
                  pathRewrite: {
                      "^/user": "/",
                  }
              }
          }
      },
      css: {
          loaderOptions: {
              sass: {
                  data: '@import "@/styles/index.scss";'
              }
          }
      },
      configureWebpack: {
          plugins: [
              new webpack.ProvidePlugin({
                  $: "jquery",
                  jQuery: "jquery",
                  "window.jQuery": "jquery",
                  _: "lodash"
              })
          ]
      },
      chainWebpack: config => {
          config.module
              .rule('iview')
              .test(/iview.src.*?js$/)
              .use('babel')
              .loader('babel-loader')
              .end()
          Object.keys(pages).forEach(page => {
              config.plugins.delete(`preload-${page}`)
              config.plugins.delete(`prefetch-${page}`)
          })
      }
  }

3、環境變量（NODE_ENV）

• 開發模式 development、測試模式 test、生產模式 production
  • 注解：我們通常用環境變量NODE_ENV來進行區分；

4、@vue/cli中最大的特點：可視化

• windows + R 打開命令行，輸入命令vue ui

          

• 在本地瀏覽器將自動打開一個服務，出現一個非常舒服的界面

          

• 創建項目
  • 填寫項目名稱 -----> 選擇項目的目錄 -----> 選擇包管理器 -----> 點擊 ‘下一步’

                      

• • 下面的操作跟cmd命令行大致一樣，不在具體闡述
• 管理項目
• 導入項目

5、遇到的問題

      暫無