vue ui

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

image.png

image.png

image.png

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

image.png

項目中也可以看到

image.png

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

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

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

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

區(qū)別

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

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

image.png

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

image.png

現(xiàn)在我們已經(jīng)搭建好了一個簡單的vue項目。
參考文章：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 中的一個環(huán)境對象。其中保存著系統(tǒng)的環(huán)境的變量信息?？墒褂?Node.js 命令行工具直接進行查看。

image.png

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

image.png

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

• npm run dev(serve) ，其實是運行了vue-cli service serve ，默認模式為 development 。可以在.env.development文件下修改該模式的 NODE_ENV 。
• npm run build，其實運行了 vue-cli service build ，默認模式為production ?？梢栽?.env.production文件下修改該模式的 NODE_ENV 。

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

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

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

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

image.png

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

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

這時候我們怎么在 vue.config.js 中訪問這些變量呢？很簡單，使用 process.env.[name] 進行訪問就可以了，比如：

// 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)你運行 npm serve 命令后會發(fā)現(xiàn)輸出的是 development，因為 vue-cli-service serve 命令默認設(shè)置的環(huán)境是development，你需要修改 package.json 中的 serve 腳本的命令為：

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

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

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

NODE_ENV=staging
VUE_APP_TITLE=staging mode
VUE_APP_NAME=project

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

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

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

2、環(huán)境注入
通過上述配置文件的創(chuàng)建，我們成功使用命令行的形式對項目環(huán)境進行了設(shè)置并可以自由切換，但是需要注意的是我們在 Vue 的前端代碼中打印出的 process.env 與 vue.config.js 中輸出的可能是不一樣的，這需要普及一個知識點：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)幫我們完成了這個功能，所以我們可以直接在客戶端代碼中打印出 process.env 的值，該對象可以包含多個鍵值對，也就是說可以注入多個值，但是經(jīng)過 CLI 封裝后僅支持注入環(huán)境配置文件中以 VUE_APP_ 開頭的變量，而 NODE_ENV 和 BASE_URL 這兩個特殊變量除外。比如我們在權(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 的信息，但是我們在入口文件 main.js 中打印會發(fā)現(xiàn)輸出：

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

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

image.png

因為在安裝時選擇了eslint，就會有一些莫名其妙的格式規(guī)范的報錯。（嘗試了瓦網(wǎng)上說的很多辦法都不可以）
我們在項目中的vue.config.js文件里加上：

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

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