@vue/cli 3 安裝搭建及 webpack 配置

  @vue/cli  是一個基於 Vue.js 進行快速開發的完整系統。

 @vue/cli   基於node服務  需要8.9以上版本 可以使用 nvm等工具來控制node版本  構建於 webpack 和 webpack-dev-server 之上 

 安裝  

如果已安裝舊版 需要先卸載舊版本 :  

npm uninstall vue-cli -g 
//or
yarn global remove vue-cli

任一命令安裝全局新包:

 npm install -g @vue/cli   
  //or
 yarn global add @vue/cli
  //or
 cnpm global add @vue/cli

 

查看版本:

vue --version
//or
vue -V

創建項目:

vue create  my-project # 項目名
# Windows 上通過 minTTY 使用 Git Bash，交互提示符並不工作。  
# 你必須通過   winpty vue.cmd create hello-world   啟動這個命令。

# or
npx @vue/cli create appname

 

創建時會提示  preset 預置項

可以選擇默認配置

也可以選擇手動配置

Please pick a preset: 
> vue-router base (vue-router, vuex, less, babel, pwa, unit-mocha)  //配置過的預置項(preset)

default (babel, eslint) Manually select features //默認的preset
Manually select features //手動配置需要的preset

在操作提示的最后你可以選擇將已選項保存為一個將來可復用的 preset。

同時 現在可以可視化創建項目:

vue ui

命令會打開一個瀏覽器窗口，並以圖形化界面將你引導至項目創建的流程。

webpack 配置

在項目根目錄手動創建 vue.config.js

導出一個對象 :

module.exports = {
  
}

有些webpack 選項不能直接修改

比如 應該修改 vue.config.js 中的 outputDir 而不是修改 webpack 中的 output.path

 基於環境有條件地配置行為，或者想要直接修改配置:

 baseUrl 從Vue CLI 3.3 起已棄用，請使用publicPath。

 

const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ProxyAgent = require('proxy-agent')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  outputDir: process.env.outputDir || 'dist', // 'dist', 生產環境構建文件的目錄
  runtimeCompiler: true,
  assetsDir: 'static',
  productionSourceMap: false, // 生產環境的 source map
  parallel: require('os').cpus().length > 1,
  configureWebpack: config => {
    // 公共配置
    // cdn引用時配置externals 防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴
    config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'vuex': 'Vuex',
      'axios': 'axios'
    }
    config.resolve.alias = Object.assign({}, config.resolve.alias, {
      'src': resolve('src/common'),
      'common': resolve('src/views/common'),
      'static': resolve('static')
    })
    if (process.env.NODE_ENV === 'production') {
      // 為生產環境修改配置...
      config.optimization = {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                drop_console: true, // console
                drop_debugger: false,
                pure_funcs: ['console.log']// 移除console
              }
            }
          })
        ]
      }
    } else {
      // 為開發環境修改配置...
    }
  },
  css: {
    loaderOptions: {
      css: {
        importLoaders: 1 // @import 引入的文件可被一個loader處理 （2 可被兩個loader處理）
      }
    }
  },
  devServer: {
    port: 80,
    disableHostCheck: true, // 可使用本地host配置的域名訪問
    proxy: {
      '/api': {
        agent: new ProxyAgent('http://132.128.11.12'),
        target: 'http://132.128.11.12',
        ws: false,
        changeOrigin: true
      }
    }

  }
}

 

 

 

鏈式操作

@vue/cli  內部的webpack 配置是通過 webpack-chain 維護的。

配置選項:

module.exports = {
    baseUrl: '/',
    outputDir: 'dist', //打包輸出目錄默認dist
   // assetsDir: 'bbbbb', //放置生成的靜態資源 默認 ''
    chainWebpack: config => { //會接收一個基於 webpack-chain 的 ChainableConfig 實例。允許對內部的 webpack 配置進行更細粒度的修改。 
       config.resolve.alias.set('~',path.join(__dirname, '..','src/assets')) 
　　　　　　},

 }

更多細節可查閱 vue.config.js 

 Owen 的個人博客