.env+vue.config.js
這一章主要環境相關配置
開發環境與線上環境配置
下面是vue cli 配置模式和環境變量： 模式和環境變量
vue-cli 3.0x與vue-cli 2.0x最主要的區別是項目結構目錄精簡化，這也帶來了許多問題，很多配置需要自己配置，
由於2.0x版本中直接在config/文件夾下面配置開發環境與線上環境，3.0x則需要自己配置。
首先配置開發環境，在項目根目錄下新建三個文件，如果有測試環境還可以再加一個。
屬性名必須以VUE_APP_開頭，比如VUE_APP_XXX 只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中， NODE_ENV 和 BASE_URL 是兩個特殊變量，在代碼中始終可用
在根目錄下創建以下文件
.env 全局默認，任何環境都加載合併
.env.development 開發環境下的配置文件
.env.production 生產環境下的配置文件
.env.development 內容寫
NODE_ENV="development" //開發環境
BASE_URL="http://localhost:3000/" //開發環境接口地址
.env.production 線上環境
NODE_ENV="production" //生產環境
BASE_URL="url" //生產環境的地址
現在我們如何在項目中判斷當前環境呢？ 我們可以根據process.env.BASE_URL來獲取它是線上環境還是開發環境，下一章中會有運用
if(process.env.NODE_ENV='development'){
console.log( process.env.BASE_URL) // http://localhost:3000/
}else{
console.log( process.env.BASE_URL) // url
}
只在本地有效的變量
有的時候你可能有一些不應該提交到代碼倉庫中的變量，尤其是當你的項目託管在公共倉庫時。 這種情況下你應該使用一個 .env.local 文件取而代之。本地環境文件默認會被忽略，且出現在 .gitignore 中。
.local 也可以加在指定模式的環境文件上，比如 .env.development.local 將會在 development 模式下被載入，且被 git 忽略。
vue.config.js配置
2.x裏面webpack相關的配置項直接在項目的build/webpack.base.conf.js裏面配置，而3.x完全在vue.config.js中配置
創建vue.config.js
vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。
由於項目初始化的時候沒有vue.config.js配置文件，因此我們需要在項目根目錄下新建一個vue.config.js配置項。
配置具體參數可以參考： 配置參考
這個項目主要是配置三個東西，第一個就是目錄別名alias，另一個是項目啓動時自動打開瀏覽器，最後一個就是處理css。
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
module.exports = {
chainWebpack: config => {
//設置別名
config.resolve.alias
.set('@',resolve('src'))
},
devServer: {
open:true //打開瀏覽器窗口
},
css: {
loaderOptions: {
css: {
// 這裏的選項會傳遞給 css-loader
},
}
}
}
更多配置項參考
更多配置項
'use strict'
module.exports = {
publicPath: './', //基本路徑
outputDir: 'dist', //構建時的輸出目錄
assetsDir: 'static',//放置靜態資源的目錄
indexPath: 'index.html',//html 的輸出路徑
filenameHashing: true,//文件名哈希值
lintOnSave: true,//是否在保存的時候使用 `eslint-loader` 進行檢查。
//組件是如何被渲染到頁面中的？ （ast：抽象語法樹；vDom：虛擬DOM）
//template ---> ast ---> render ---> vDom ---> 真實的Dom ---> 頁面
//runtime-only：將template在打包的時候，就已經編譯爲render函數
//runtime-compiler：在運行的時候纔去編譯template
runtimeCompiler: false,
transpileDependencies: [],//babel-loader 默認會跳過 node_modules 依賴。
productionSourceMap: false,//是否爲生產環境構建生成 source map？
//調整內部的 webpack 配置
configureWebpack:: () => {},
chainWebpack: () => {},
// 配置 webpack-dev-server 行爲。
devServer: {
open: true, //編譯後默認打開瀏覽器
host: '0.0.0.0', //域名
port: 8080, // 端口
https: false, //是否https
//顯示警告和錯誤
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://asoyy.xyz',
changeOrigin: true, //是否跨域
ws: false, //是否支持websocket
secure: false, //如果是https接口，需要配置這個參數
pathRewrite: {
'^/api': ''
}
}
}
}
}
添加別名alias
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set("vue$", "vue/dist/vue.esm.js")
.set("@", resolve("src"))
.set("@assets", resolve("src/assets"))
.set("@components", resolve("src/components"))
.set("@views", resolve("src/views"))
.set("@router", resolve("src/router"))
.set("@store", resolve("src/store"));
}
};
其他
關於sass（scss）、less、postcss、stylus等的用法與區別
CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件，以供項目使用。