VUE CLI 3 配置

時間  2019-11-15
標籤 vue cli 配置 简体版
原文   原文鏈接

前置知識

  • node安裝
  • npm(yarn,cnpm)
  • webpack(webpack-cli)

VUE CLI3使用中遇到問題

IE兼容處理、移除consolejavascript

npm install @babel/polyfill -s
npm install transform-remove-console -s

// 在babel.config.js中配置以下
const plugins = []
if (process.env.NODE_ENV === 'production') {
  // 移除console.log
  plugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.array.iterator',
        'es6.promise',
        'es7.promise.finally',
        'es6.symbol',
        'es6.array.find-index',
        'es7.array.includes',
        'es6.string.includes',
        'es6.array.find',
        'es6.object.assign'
      ]
    }]
  ],
  plugins
}


複製代碼

基於vue-cli3.0快速構建vue項目

本章詳細介紹使用vue-cli3.0來搭建項目。 本章使用vue-cli3.0構建的項目是基於webpack的模板文件，構建後的項目屬於單頁面（SPA）應用。所以，該文檔後續操做與說明不適用於構建一個多頁面應用。css

相比於以前有以下優勢：html

  • 功能豐富：對babel、Typescript、ESLint...提供開箱即用的支持
  • 易於擴展：它的插件系統可讓社區根據需求構建和共享可複用的解決方案
  • 無需Eject：vue cli 徹底可配置的，無需再使用webpack配置
  • CLI圖形化界面：vue ui圖形化界面建立、開發和管理項目
  • 即刻建立原型：用單個vue文件實現新的靈感
  • 面向將來：爲現代瀏覽器輕鬆產出原生的ES2015代碼，或將你的vue組件構建爲原生的Web Components組件

一、vue-cli3.0初始化

安裝@vue/cli

# npm install -g @vue/cli
OR
# yarn global add @vue/cli
複製代碼

你可使用vue --version 或者 vue -V檢查其版本前端

注意事項:

  • VUE CLI3的包名稱由vue-cli改爲@vue/cli。若是你已經安裝了舊版本的vue-cli(1.x或2.x)，你先經過npm uninstall vue-cli -g或 yarn global remove vue-cli卸載它。
  • VUE CLI3須要node8.9或更高版本（推薦8.11.0+）
  • VUE CLI3和舊版本使用了相同的vue命令，因此Vue CLI2(vue-cli)被覆蓋了。若是你仍然須要使用舊版本的vue init 功能，你須要全局安裝一個橋接工具：
npm install -g @vue/cli-init
Vue init webpack myVue
複製代碼

二、建立項目

可使用vue ui圖形化界面建立和管理項目，這裏不作闡述，請自行查看cli.vuejs.org/，下面以命令行形式進行建立：vue

vue create vuedemo
複製代碼

你會被提示選取一個preset。你能夠選默認的包含了基本的Babel+ESLint設置的preset，也能夠選手動選擇特性來選取須要的特性。java

這個默認的設置很是適合快速建立一個新項目的原型，而手動設置則提供了更多的選項，它們是面向生產的項目更加須要的，下面以」手動設置「爲例。以上下鍵移動，以空格鍵進行是否選定node

  • Babel : 將ES6編譯成ES5
  • TypeScript: javascript類型的超集
  • Progressive Web App (PWA) Support: 支持漸進式的網頁應用程序
  • Router:vue-router
  • Vuex: 狀態管理
  • CSS Pre-processors: CSS預處理
  • Linter / Formatter: 開發規範
  • Unit Testing: 單元測試
  • E2E Testing: 端到端測試

若是後續你想在一個已經被建立好的項目中安裝插件，可使用 vue add 命令：webpack

D:\i\vuedemo> vue add vuex
複製代碼

出現如上字樣，說明安裝成功。請輸入命令cd vuedemo與yarn serve運行環境。git

三、配置文件說明

vue-cli3.0致力於Vue生態中的工具基礎標準化。它確保了各類構建工具可以基於智能的默認配置便可平穩銜接，這樣你就能夠專一在撰寫應用上，減小配置的時間。查看以下文件，會發現相比於vue-cli2.0少了build與config文件夾，因此vue-cli3提供了一個可選的配置文件 ——vue.config.js。請具體參考4和5(打包配置)，這裏只詳細解讀文件做用。es6

|-- dist                       # 打包後文件夾 
|-- public                     # 靜態文件夾 
|   |-- favicon.ico				
|   |-- index.html					#入口頁面
|-- src                        # 源碼目錄 
|   |--assets						# 模塊資源
|   |--components					# vue公共組件
|   |--views 						
|   |--App.vue                                          # 頁面入口文件
|   |--main.js	                                        # 入口文件，加載公共組件
|   |--router.js                                        # 路由配置
|   |--store.js	                                        # 狀態管理
|-- .env.pre-release          # 預發佈環境 
|-- .env.production	      # 生產環境 
|-- .env.test		      # 測試環境 
|-- vue.config.js             # 配置文件 
|-- .eslintrc.js    		  	# ES-lint校驗 
|-- .gitignore          		# git忽略上傳的文件格式 
|-- babel.config.js   			# babel語法編譯 
|-- package.json       	     # 項目基本信息 
|-- postcss.config.js   	 	# CSS預處理器(此處默認啓用autoprefixer) 
複製代碼

四、vue.config.js配置

Vue.config.js是一個可選的配置文件，若是項目的根目錄存在這個文件，那麼它就會被 @vue/cli-service 自動加載。你也可使用package.json中的vue字段，但要注意嚴格遵照JSON的格式來寫。這裏使用配置vue.config.js的方式進行處理。

const webpack = require('webpack')
module.exports = {
    //部署應用包時的基本 URL
    publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
    //當運行 vue-cli-service build 時生成的生產環境構建文件的目錄
    outputDir: 'dist',
    //放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
    assetsDir: 'assets',
    // eslint-loader 是否在保存的時候檢查 安裝@vue/cli-plugin-eslint有效
    lintOnSave: true,
    //是否使用包含運行時編譯器的 Vue 構建版本。設置true後你就能夠在使用template
    runtimeCompiler: true,
    // 生產環境是否生成 sourceMap 文件 sourceMap的詳解請看末尾 
    productionSourceMap: true,
    
    //容許咱們更細粒度的控制 webpack 的內部配置,例如：如下操做咱們能夠成功修改 webpack 中 module 項裏配置 rules 規則爲圖片下的 url-loader 值，將其 limit 限制改成 5M
    chainWebpack: config => {
        config.module.rule("images")
        .use("url-loader")
        .tap(options =>
        merge(options, {
        limit: 5120
    }));
    },
    //能夠在正式環境下關閉錯誤報告 console.log...
    configureWebpack: config => { 
        if (process.env.NODE_ENV === 'production') {
            // 爲生產環境修改配置...
        } else {
            // 爲開發環境修改配置...
        }
    },
    // css相關配置
    css: {
        // 是否使用css分離插件 ExtractTextPlugin 生產環境下是true,開發環境下是false
        extract: true,
        // 開啓 CSS source maps?
        sourceMap: false,
        // css預設器配置項
        loaderOptions: {},
        // 啓用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // webpack-dev-server 相關配置
    devServer: { // 設置代理
        hot: true, //熱加載
        host: '0.0.0.0', //ip地址
        port: 8085, //端口
        https: false, //false關閉https，true爲開啓
        open: true, //自動打開瀏覽器
        proxy: {
            '/api': { //本地 
            target: 'http://192.168.102.13:8080/',
            // 若是要代理 websockets
            ws: true,
            changeOrigin: true
      },
      '/test': { //測試
        target: 'http://172.22.0.58:8082/'
      },
      '/pre-release': {  //預發佈
        target: 'http://XXX.com/'
      },
      '/production': { //正式
        target: 'http://XXX.com/'
      }
        }
    },
    pluginOptions: { // 第三方插件配置
        // ...
    }
}
複製代碼

擴展:

Source map的做用：針對打包後的代碼進行的處理，就是一個信息文件，裏面儲存着位置信息。也就是說，轉換後的代碼的每個位置，所對應的轉換前的位置。有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉換後的代碼。這無疑給開發者帶來了很大方便。

五、打包配置

在實際項目的開發中，咱們通常會經歷項目的開發階段、測試階段、預發佈階段和最終上線階段，每個階段對於項目代碼的要求可能都不盡相同，那麼咱們如何可以遊刃有餘的在不一樣階段下使咱們的項目呈現不一樣的效果，使用不一樣的功能呢？這裏就須要引入環境的概念。

通常一個項目都會有如下 4 種環境：

  • 開發環境（開發階段，本地開發版本，通常會使用一些調試工具或額外的輔助功能）
  • 測試環境（測試階段，上線前版本，除了一些 bug 的修復，基本不會和上線版本有很大差異）
  • 預發佈環境（即將上線階段，上線前版本，預測線上出現問題的可能性，和上線版本無差異）
  • 生產環境（上線階段，正式對外發布的版本，通常會進行優化，關掉錯誤報告）

做爲一名開發人員，咱們可能須要針對每一種環境編寫一些不一樣的代碼而且保證這些代碼運行在正確的環境中，這就須要咱們進行正確的環境配置和管理。

建立.env.test文件，文件內容以下

NODE_ENV='test'                    # 測試環境
VUE_APP_TT='TT'
複製代碼

建立.env.pre-release文件，文件內容以下：

NODE_ENV='pre-release'              # 預發佈環境
複製代碼

建立.env.production文件，文件內容以下：

NODE_ENV='production'              # 正式環境
VUE_APP_T='la'
Q='1'
複製代碼
package.json配置
"scripts": {
    "serve": "vue-cli-service serve ",
    "build:pre": "vue-cli-service build --mode pre-release",  #預發佈環境
    "build:test": "vue-cli-service build --mode test", #測試環境
    "build:prod": "vue-cli-service build --mode production", #正式環境
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
}
複製代碼

注意：

  • 在vue.config.js使用process.env.[name]進行訪問就能夠了
// vue.config.js

console.log(process.env.NODE_ENV); // development（在終端輸出）
複製代碼
  • 當你運行 yarn serve 命令後會發現輸出的是 development，由於 vue-cli-service serve 命令默認設置的環境是 development，你須要修改 package.json 中的 serve 腳本的命令爲：
"scripts": {
"serve": "vue-cli-service serve --mode test",
}
#--mode test其實就是修改了 webpack 4 中的 mode 配置項爲 test，同時其會讀取對應 .env.[model]文件下的配置，若是沒找到對應配置文件，其會使用默認環境 development，一樣 vue-cli-service build 會使用默認環境 production。
複製代碼
有關環境變量的注意事項
  • 環境名應該與環境文件統一
  • 環境文件放置根目錄下
  • 除了 baseUrl 和 NODE_ENV 其餘環境變量使用 VUE_APP開頭

六、部署項目的跨域處理

項目打包後，進行上線，此時，vue項目在開發調試模式下配置的跨域處理無效，此時跨域處理依賴要訪問後端服務的配置。

第一種解決方法後端增長CORS跨域資源共享，Java、.Net代碼有區別，可是大致認是設置Http協議中的「origin」相關的屬性。

第二種方法設置後端的HTTP服務器，對全部HTTP請求進行過濾，增長跨域CORS資源共享。

這兩種方式前端開發都沒法介入，須要和後端服務提供的開發人員、部署服務的運維進行溝通說明。

githup地址：github.com/Mr-jili/vue…

請各位給給意見，查漏補缺，有哪些不足之處請給予意見。呸呸，文檔須要上交領導---

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程