vue cli3 項目配置

【轉】https://juejin.im/post/5c63afd56fb9a049b41cf5f4

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

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

相比於之前有如下優點：

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

1、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 create vuedemo
復制代碼

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

 

 

這個默認的設置非常適合快速創建一個新項目的原型，而手動設置則提供了更多的選項，它們是面向生產的項目更加需要的，下面以”手動設置“為例。以上下鍵移動，以空格鍵進行是否選定

 

 

• 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 命令：

D:\i\vuedemo> vue add vuex

 

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

配置文件說明

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

 

 

|-- 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,
    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: 'xxx',
                // 如果要代理 websockets
                ws: true,
                changeOrigin: true
            },
            '/test': { //測試
                target: 'xxx'
            },
            '/pre': { //預發布
                target: 'xxx'
            },
            '/pro': { //正式
                target: 'xxx'
            }
        }
    },
    pluginOptions: { // 第三方插件配置
        // ...
    }
}

 

擴展:

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

打包配置

創建.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"
}

有關環境變量的注意事項

• 環境名應該與環境文件統一
• 環境文件放置根目錄下
• 除了 baseUrl 和 NODE_ENV 其他環境變量使用 VUE_APP開頭