搭建vue cli4專案及打包配置

1.安裝vue/cli4.x

//解除安裝
npm uninstall vue-cli -g
//安裝
 npm install -g @vue/cli

//安裝yarn
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org -g
//http://cdn.npm.taobao.org/dist/node-sass 已經失效
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass -g
yarn config get registry

2.建立vue專案

vue create 專案名稱(不可有大寫字母)

//選擇第三個按需配置


空格選擇，選好按回車（enter）

一個vue 2
一個vue 3
我這裡選擇vue2

是否使用路由的history模式，看個人及專案，開發時候可以不選擇
使用history，上線後需要後端有相關配置
繼續回車

由於本菜鳥還不會dart-sass
所以選擇node-sass

選擇哪個ESLint自動化程式碼格式化檢測，分別為，只預防、airbnb配置、標註配置、最高配置，這裡選擇左後一種最高配置

選擇程式碼檢測的時機，這裡選擇在儲存程式碼時檢測

更新換將單獨配置的檔案放到pakage.json還是放在單獨的檔案，這裡選擇單獨的檔案即可，清晰

是否把以上設定過的預設配置儲存起來，這裡不需要，每次建立專案重新選擇一遍不麻煩，很快就選擇好了，輸入n

如果報錯
莫慌，把

node_modules刪掉

npm install -g cnpm -registry=https://registry.npm.taobao.org

使用cnpm i重新下載依賴

3.執行專案

yarn serve

複製這網址到瀏覽器

4.到此為止已成功，下面配置babel.config.js
如果沒有babel.config.js

//安裝: 
npm install babel-plugin-component -D

安裝成功之後生成檔案: babel-config.js
下面配置 Element 檔案按需載入

module.exports = {
  presets: [
    "@vue/cli-plugin-babel/preset"
  ],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
}

5.下面開始vue.config.js配置，沒有這檔案，新建一個

安裝webpack官網

npm install --save-dev webpack

安裝compression-webpack-plugin 開啟gzip 官網

npm i -D compression-webpack-plugin

const webpack = require("webpack");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];
module.exports = {
    publicPath: "./",//打包後的位置(如果不設定這個靜態資源會報404)
    // publicPath: process.env.NODE_ENV === "production" ? "http://47.92.237.225:8080/dist" : "./",
    outputDir: "dist",//打包後的目錄名稱
    assetsDir: "static",//靜態資源目錄名稱
    productionSourceMap: false,  //去掉打包的時候生成的map檔案
    lintOnSave: true,
    filenameHashing: false,
    devServer: {
        sockHost: "http://192.168.2.22:8080/",
        disableHostCheck: true,
        host: "0.0.0.0",  //不清楚主機和目的網路
        port: 8080, // 源地址埠，自行修改
        disableHostCheck: true,
        hotOnly: false,
        useLocalIp: false,
        //下面配置為開啟gzip
        configureWebpack: {
            plugins: [
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',   // 提示compression-webpack-plugin@3.0.0的話asset改為filename
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240,
                    minRatio: 0.8,
                    deleteOriginalAssets: false  //不刪除原始檔
                }),
            ]
        }
    }
}