? 升級vue-cli3.0/vue.config.js配置檔案/vue-cli3.0移動端適配

麻辣大龍蝦發表於2019-02-22
VueJS

從vue-cli2.x?升級至vue-cli3.0

vuecli3.0 官方文件      https://cli.vuejs.org/zh/guide/


? vuecli 2.x 升級3.0

npm uninstall -g vue-cli       //先解除安裝原來的版本
npm install -g @vue/cli        //下載vue-cli3.0版本
複製程式碼

? 3.0自定義功能配置

  • TypeScript
  • Progressive Web App (PWA) Support
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter
  • Unit Testing
  • E2E Testing

? 選擇Manually select features

選擇Manually select features


? 選擇自定義功能配置

Babel編譯、使用Vue路由、Vue狀態管理器、CSS前處理器、程式碼檢測和格式化、以及單元測試

選擇自定義功能配置


? 選擇CSS前處理器語言，LESS/SCSS看需求

LESS/SCSS


? 選擇ESLint的程式碼規範

ESLint


? 進行程式碼檢測，選擇在儲存時進行檢測

ESLint


? 選擇單元測試解決方案，此處選擇 Jest

Jest


? 選擇 Babel、PostCSS、ESLint等配置檔案存放位置

推薦單獨儲存在各自的配置檔案

save

? 最後兩步

? save this as a preset for future projects? Yes

//是否將以上這些將此儲存為未來專案的預配置嗎？

? save preset as:vue-test
//描述專案

? 配置完成後等待vue-cli完成初始化

waiting

// 進入到vue-test專案
cd vue-test
// - 啟動服務
npm run serve
// - 打包編譯
npm run build
複製程式碼

waiting

? 建立完成後的目錄

  • 移除了配置檔案目錄， config 和 build 資料夾。
  • 移除了 static 資料夾，新增 public 資料夾，並且 index.html 移動到 public 中。
  • 在 src 資料夾中新增了 views 資料夾，用於分類 檢視元件 和 公共元件。

waiting

? vue.config.js

在根目錄下新建一個 vue.config.js檔案，進行你的配置，具體配置看文件


const path = require('path');
const IS_PROD = ['production'].includes(process.env.NODE_ENV) 
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 去掉註釋

// gzip --start
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzip = true // 是否使用gzip
const productionGzipExtensions = ['js', 'css'] // 需要gzip壓縮的檔案字尾
// gzip --end

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  // 部署應用時的基本 URL
  // baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',
  // baseUrl:'/',

  publicPath: IS_PROD ? './' : '/',

  // build時構建檔案的目錄 構建時傳入 --no-clean 可關閉該行為
  outputDir: 'dist',

  // build時放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
  assetsDir: '',

  // 指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑。
  indexPath: 'index.html',

  // 預設在生成的靜態資原始檔名中包含hash以控制快取
  filenameHashing: true,

  // 是否在開發環境下通過 eslint-loader 在每次儲存時 lint 程式碼 (在生產構建時禁用 eslint-loader)
  // lintOnSave: process.env.NODE_ENV !== 'production',
  lintOnSave: false,

  // 是否使用包含執行時編譯器的 Vue 構建版本
  runtimeCompiler: false,

  // Babel 顯式轉譯列表
  transpileDependencies: [],

  // 如果你不需要生產環境的 source map，可以將其設定為 false 以加速生產環境構建
  productionSourceMap: false,

  // 設定生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標籤的 crossorigin 屬性（注：僅影響構建時注入的標籤）
  crossorigin: '',

  // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標籤上啟用 Subresource Integrity (SRI)
  integrity: false,

  // 如果這個值是一個物件，則會通過 webpack-merge 合併到最終的配置中
  // 如果你需要基於環境有條件地配置行為，或者想要直接修改配置，那就換成一個函式 (該函式會在環境變數被設定之後懶執行)。該方法的第一個引數會收到已經解析好的配置。在函式內，你可以直接修改配置，或者返回一個將會被合併的物件
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins = config.plugins.concat(
        [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                warnings: false,
                drop_debugger: true,
                drop_console: true, //去掉console註釋
              },
            },
          })

        ]
      )
      // gzip
      // 2. 構建時開啟gzip，降低伺服器壓縮對CPU資源的佔用，伺服器也要相應開啟gzip
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))
    }
  },
  // 對內部的 webpack 配置（比如修改、增加Loader選項）(鏈式操作)
  chainWebpack: () => {

  },


  // css的處理
  css: {
    // 當為true時，css檔名可省略 module 預設為 false
    modules: false,
    // 是否將元件中的 CSS 提取至一個獨立的 CSS 檔案中,當作為一個庫構建時，你也可以將其設定為 false 免得使用者自己匯入 CSS
    // 預設生產環境下是 true，開發環境下是 false
    extract: false,
    // 是否為 CSS 開啟 source map。設定為 true 之後可能會影響構建的效能
    sourceMap: false,
    //向 CSS 相關的 loader 傳遞選項(支援 css-loader postcss-loader sass-loader less-loader stylus-loader)
    loaderOptions: {
      css: {},
      less: {}
    }
  },

  // 所有 webpack-dev-server 的選項都支援
  devServer: {},

  // 是否為 Babel 或 TypeScript 使用 thread-loader
  parallel: require('os').cpus().length > 1,

  // 向 PWA 外掛傳遞選項
  pwa: {},

  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false, // 熱更新
    proxy: null, // 設定代理
  },

  // 可以用來傳遞任何第三方外掛選項
  pluginOptions: {}
}

複製程式碼


? vue-cli3.0中的移動端適配

  • 專案中安裝 lib-flexible 和 postcss-px2rem

npm install lib-flexible --save

npm install postcss-px2rem --save

  • 入口檔案引入 import 'lib-flexible/flexible.js'

  • ? postcss.config.js檔案
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
        remUnit: 75,
        exclude: /node_modules|folder_name/i
      }
  }
}

複製程式碼

重啟專案。再看一下px有沒有變成rem

1px的邊框容易缺失，使用 /no/ 語法來遮蔽該屬性轉換

? 安裝uglifyjs-webpack-plugin打包後去掉註釋和console

npm install uglifyjs-webpack-plugin -D

vue.config.js中

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.plugins = config.plugins.concat(
                [
                    new UglifyJsPlugin({
                        uglifyOptions: {
                            compress: {
                                warnings: false,
                                drop_debugger: true,
                                drop_console: true,
                            },
                        },
                    })

                ]
            )
        }
    },
複製程式碼

? 執行打包後專案dist

npm install -g serve

# -s 引數的意思是將其架設在 Single-Page Application 模式下

# 這個模式會處理即將提到的路由問題

serve -s dist
複製程式碼

相關文章