vue ui

可以看到創(chuàng)建vue項(xiàng)目的可視化界面，
　

image.png

image.png

image.png

6、在這里界面中通過左側(cè)菜單可以查看項(xiàng)目創(chuàng)建結(jié)果目錄及文件結(jié)構(gòu)，默認(rèn)安裝了@vue/cli-service,@vue/cli-plugin-babel,
@vue/cli-plugin-eslint插件，依賴包及webpack相關(guān)配置

image.png

項(xiàng)目中也可以看到

image.png

devDependencies和dependencies的區(qū)別
在使用npm安裝一些包時(shí)，經(jīng)常要用到npm install這個(gè)命令，而對(duì)后面跟著的參數(shù)–save和–save-dev經(jīng)常搞糊涂，那我們來看下這兩者到底有啥區(qū)別。

1. devDependencies用于本地環(huán)境開發(fā)時(shí)候所需要的依賴包。
2. dependencies用戶發(fā)布環(huán)境，生成上所需要的依賴包

• 后面部分為–save -dev 的情況會(huì)使得下載的插件放在package.json文件的devDpendencies對(duì)象里面

• 后面部分為–save的情況會(huì)使得下載的插件放在package.json文件的dependencies對(duì)象里面

區(qū)別

• devDependencies下的依賴包，只是我們?cè)诒镜鼗蜷_發(fā)壞境下運(yùn)行代碼所依賴的，若發(fā)到線上，其實(shí)就不需要devDependencies下的所有依賴包；(比如各種loader，babel全家桶及各種webpack的插件等)只用于開發(fā)環(huán)境，不用于生產(chǎn)環(huán)境，因此不需要打包；
• dependencies是我們線上(生產(chǎn)壞境)下所要依賴的包，比如vue，我們線上時(shí)必須要使用的，所以要放在dependencies下；dependencies依賴的包不僅開發(fā)環(huán)境能使用，生產(chǎn)環(huán)境也能使用
• 例如:
  babel-plugin-transform-remove-console這個(gè)插件是線上環(huán)境打包去掉console.log，本地及測試環(huán)境保留。是在npm run build的時(shí)候需要用到這個(gè)插件，并不是生產(chǎn)環(huán)境下代碼運(yùn)行依賴于這個(gè)插件，所以，babel-plugin-transform-remove-console應(yīng)該在安裝時(shí)加上–save -dev，出現(xiàn)在devDependencies中

我們可以使用任務(wù)-serve里面的工具來運(yùn)行項(xiàng)目，解放雙手

image.png

可視化工具配置vue.config.js文件

image.png

現(xiàn)在我們已經(jīng)搭建好了一個(gè)簡單的vue項(xiàng)目。
參考文章：https://blog.csdn.net/qq_42893625/article/details/102540535
https://www.jb51.net/article/152030.htm

env 文件與環(huán)境變量和模式

https://www.cnblogs.com/sese/p/11905402.html
先看官網(wǎng)：環(huán)境變量和模式

process.env 為何物
process.env 是 Node.js 中的一個(gè)環(huán)境對(duì)象。其中保存著系統(tǒng)的環(huán)境的變量信息?？墒褂?Node.js 命令行工具直接進(jìn)行查看。

image.png

而 NODE_ENV就是其中的一個(gè)環(huán)境變量。這個(gè)變量主要用于標(biāo)識(shí)當(dāng)前的環(huán)境（生產(chǎn)環(huán)境，開發(fā)環(huán)境）。默認(rèn)是沒有這個(gè)環(huán)境變量的，需要自己手動(dòng)配置。不同系統(tǒng)有不同的環(huán)境變量配置方式，在這里就不多加贅述。

image.png

也就是說，在 Vue 中， NODE_ENV可以通過 .env文件或者 .env.[mode]文件配置。配置過后，運(yùn)行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）時(shí)，就會(huì)將該模式下的NODE_ENV載入其中了。而這些命令，都有自己的默認(rèn)模式：

• npm run dev(serve) ，其實(shí)是運(yùn)行了vue-cli service serve ，默認(rèn)模式為 development ?？梢栽?code>.env.development文件下修改該模式的 NODE_ENV 。
• npm run build，其實(shí)運(yùn)行了 vue-cli service build ，默認(rèn)模式為production ?？梢栽?.env.production文件下修改該模式的 NODE_ENV 。

我個(gè)人理解：
執(zhí)行 npm run serve 時(shí)，對(duì)應(yīng)的環(huán)境默認(rèn)就是開發(fā)環(huán)境；
執(zhí)行 npm run build 時(shí)，對(duì)應(yīng)的環(huán)境默認(rèn)就是生產(chǎn)環(huán)境；

1、配置文件
一般一個(gè)項(xiàng)目都會(huì)有以下 3 種環(huán)境：- 開發(fā)環(huán)境- 測試環(huán)境- 生產(chǎn)環(huán)境
我們可以在根目錄下創(chuàng)建以下形式的文件進(jìn)行不同環(huán)境下變量的配置：

.env # 在所有的環(huán)境中被載入
.env.local # 在所有的環(huán)境中被載入，但會(huì)被 git 忽略
.env.[mode].local # 只在指定的模式中被載入，但會(huì)被 git 忽略
.env.[mode] # 只在指定的模式中被載入

如官方文檔所說，通過為.env文件增加后綴來設(shè)置某個(gè)模式下特有的環(huán)境變量。

image.png

我這里創(chuàng)建一個(gè)名為 .env.stage的文件，該文件表明其只在 stage（測試）環(huán)境下被加載，在這個(gè)文件中，我們可以配置如下鍵值對(duì)的變量：

NODE_ENV=stage//環(huán)境名稱
VUE_APP_TITLE=stage mode
VUE_APP_BASE_URL = 'groupClient'
VUE_APP_BASE_API = '/massgroup'

這時(shí)候我們?cè)趺丛?vue.config.js 中訪問這些變量呢？很簡單，使用 process.env.[name] 進(jìn)行訪問就可以了，比如：

// vue.config.js的service.interceptors.response.use(res => {中

console.log("當(dāng)前環(huán)境變量："+process.env.NODE_ENV) // development（在終端輸出）
console.log("當(dāng)前環(huán)境路徑："+process.env.VUE_APP_BASE_URL)
console.log("當(dāng)前環(huán)境路徑："+process.env.VUE_APP_BASE_API)

當(dāng)你運(yùn)行 npm serve 命令后會(huì)發(fā)現(xiàn)輸出的是 development，因?yàn)?vue-cli-service serve 命令默認(rèn)設(shè)置的環(huán)境是development，你需要修改 package.json 中的 serve 腳本的命令為：

"scripts": {
    "serve": "vue-cli-service serve --mode stage",
}

--mode stage其實(shí)就是修改了 webpack 4 中的 mode 配置項(xiàng)為 stage，同時(shí)其會(huì)讀取對(duì)應(yīng) .env.[model]文件下的配置，如果沒找到對(duì)應(yīng)配置文件，其會(huì)使用默認(rèn)環(huán)境 development，同樣 vue-cli-service build 會(huì)使用默認(rèn)環(huán)境 production。

這時(shí)候如果你再創(chuàng)建一個(gè) .env 的文件，再次配置重復(fù)的變量，但是值不同，如：

NODE_ENV=staging
VUE_APP_TITLE=staging mode
VUE_APP_NAME=project

因?yàn)?code>.env 文件會(huì)被所有環(huán)境加載，即公共配置，那么最終我們運(yùn)行 vue-cli-service serve 打印出來的是哪個(gè)呢？答案是 stage，但是如果是 .env.stage.local 文件中配置成上方這樣，答案便是 staging，所以 .env.[mode].local 會(huì)覆蓋 .env.[mode] 下的相同配置。同理 .env.local 會(huì)覆蓋 .env 下的相同配置。
由此可以得出結(jié)論，相同配置項(xiàng)的權(quán)重：

.env.[mode].local > .env.[mode] > .env.local > .env 

但是需要注意的是，除了相同配置項(xiàng)權(quán)重大的覆蓋小的，不同配置項(xiàng)它們會(huì)進(jìn)行合并操作，類似于 Javascript 中的 Object.assign 的用法。

2、環(huán)境注入
通過上述配置文件的創(chuàng)建，我們成功使用命令行的形式對(duì)項(xiàng)目環(huán)境進(jìn)行了設(shè)置并可以自由切換，但是需要注意的是我們?cè)?Vue 的前端代碼中打印出的 process.env 與 vue.config.js 中輸出的可能是不一樣的，這需要普及一個(gè)知識(shí)點(diǎn)：webpack 通過 DefinePlugin 內(nèi)置插件將 process.env 注入到客戶端代碼中。

// webpack 配置
{
    ...
    
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }),
    ],
    
    ...
}

由于 vue-cli 3.x 封裝的 webpack 配置中已經(jīng)幫我們完成了這個(gè)功能，所以我們可以直接在客戶端代碼中打印出 process.env 的值，該對(duì)象可以包含多個(gè)鍵值對(duì)，也就是說可以注入多個(gè)值，但是經(jīng)過 CLI 封裝后僅支持注入環(huán)境配置文件中以 VUE_APP_ 開頭的變量，而 NODE_ENV 和 BASE_URL 這兩個(gè)特殊變量除外。比如我們?cè)跈?quán)重最高的 .env.stage.local 文件中寫入：

NODE_ENV=stage2
VUE_APP_TITLE=stage mode2
NAME=vue

然后我們嘗試在 vue.config.js 中打印 process.env，終端輸出：

{
    ...
    
    npm_config_ignore_scripts: '',
    npm_config_version_git_sign: '',
    npm_config_ignore_optional: '',
    npm_config_init_version: '1.0.0',
    npm_package_dependencies_vue_router: '^3.0.1',
    npm_config_version_tag_prefix: 'v',
    npm_node_execpath: '/usr/local/bin/node',
    NODE_ENV: 'stage2',
    VUE_APP_TITLE: 'stage mode2',
    NAME: 'vue',
    BABEL_ENV: 'development',
    
    ...
}

可以看到輸出內(nèi)容除了我們環(huán)境配置中的變量外還包含了很多 npm 的信息，但是我們?cè)谌肟谖募?main.js 中打印會(huì)發(fā)現(xiàn)輸出：

{
    "BASE_URL": "/vue/",
    "NODE_ENV": "stage2",
    "VUE_APP_TITLE": "stage mode2"
}

可見注入時(shí)過濾調(diào)了非 VUE_APP_ 開頭的變量，其中多出的 BASE_URL 為你在 vue.config.js 設(shè)置的值，默認(rèn)為 /，其在環(huán)境配置文件中設(shè)置無效。

image.png

因?yàn)樵诎惭b時(shí)選擇了eslint，就會(huì)有一些莫名其妙的格式規(guī)范的報(bào)錯(cuò)。（嘗試了瓦網(wǎng)上說的很多辦法都不可以）
我們?cè)陧?xiàng)目中的vue.config.js文件里加上：

// vue.config.js
module.exports = {
    lintOnSave: false
}

重啟下項(xiàng)目，現(xiàn)在就可以了