1.找到環境變量配置文件,里面配置的文件實際上就是一個全局變量

# 開發環境配置:
```
# 頁面標題
VUE_APP_TITLE = 標題
# 開發環境配置
ENV = 'development'
#開發環境
VUE_APP_BASE_API = '/dev-api'
# 路由懶加載
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 開發環境地址
VUE_APP_BASE_URL = '生產環境地址'
```
# 生產環境配置:
```
# 頁面標題
VUE_APP_TITLE = 標題
# 生產環境配置
ENV = 'production'
# 生產環境
VUE_APP_BASE_API = '/prod-api'
# 生產環境地址
VUE_APP_BASE_URL = '生產環境地址'
```
# 測試環境配置:
```
# 頁面標題
VUE_APP_TITLE = 標題
# 測試環境配置
ENV = 'staging'
# 測試環境
VUE_APP_BASE_API = '/stage-api'
# 測試環境地址
VUE_APP_BASE_URL = '生產環境地址'
```
`vue.config.js`配置代理:
```
"use strict";
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
const name = process.env.VUE_APP_TITLE || "shukun"; // 網頁標題
const port = process.env.port || process.env.npm_config_port || 80; // 端口
module.exports = {
publicPath: "./",
// 在npm run build 或 yarn build 時 ,生成文件的目錄名稱(要和baseUrl的生產環境路徑一致)(默認dist)
outputDir: "ROOT",
// 用于放置生成的靜態資源 (js、css、img、fonts) 的;(項目打包之后,靜態資源會放在這個文件夾下)
assetsDir: "static",
// 是否開啟eslint保存檢測,有效值:ture | false | 'error'
lintOnSave: false,
// 如果你不需要生產環境的 source map,可以將其設置為 false 以加速生產環境構建。
productionSourceMap: false,
// webpack-dev-server 相關配置
devServer: {
host: "0.0.0.0",
port: port,
open: false, //啟動后默認打開瀏覽器 true 打開 false 關閉
// 代理
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: ""
}
}
},
disableHostCheck: true
},
configureWebpack: {
name: name,
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {
"@": resolve("src")
}
}
},
}
```
`packge.json`配置打包和啟動腳本
```
"scripts": {
"dev": "vue-cli-service serve",//默認開發環境啟動
"build": "vue-cli-service build --mode development",//開發環境打包
"build:stage": "vue-cli-service build --mode staging",//測試環境打包
"stage": "vue-cli-service serve --mode staging",//測試環境啟動
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"build:prod": "vue-cli-service build --mode production",//生產環境打包
"prod": "vue-cli-service serve --mode production"//生產環境啟動
},
```
- vue項目目錄
- git
- git 使用
- git 新建和合并不同git分支
- vue使用element ui
- vue復選框
- vue使用富文本編輯器
- element 級聯選擇器使用
- vue使用時間過濾器
- vue form表單中使用table表格
- element ui圖片上傳(upload)功能
- 樹形tree組件
- element 表格表頭樣式修改
- element ui添加loading動畫
- table展開列
- el-tooltip提示框加for循環無法顯示數據
- table合并
- table表頭插槽,render-header警告
- table列表中鼠標放上去顯示圖片
- 表格中輸入內容動態改變數據(箭頭和顏色)
- 使用element ui表格跨頁勾選
- 可編輯表格可分頁
- 組件之間簡單傳值
- 從表格中選擇其他表單子段
- router
- vuex
- vue接口寫法
- 將后端返回的數字轉成字符串顯示在表格中
- element ui實現動態驗證
- vue根據token判斷登錄
- vue修飾符
- js小案例
- 倒計時
- 驗證碼
- 帶文字匹配搜索框
- 選項卡
- 復選框全選,反選,全不選
- 相冊選擇,鼠標放到圖片上,對應圖放大顯示
- 敏感詞過濾
- 進度條
- 點擊按鈕回到頂部
- 電影院選座
- 盒子移動
- 鼠標綁定一個盒子
- 檔案建立,輸入信息添加到表格
- 抽獎機
- 放大鏡
- 購物車
- 飛機大戰
- echarts案例
- 常規條形圖
- 橫向條形圖
- 折線圖
- 散點圖
- 餅狀圖
- 地圖
- 雷達圖
- 儀表盤
- 條形堆疊圖
- 微前端--qiankun框架
- node中間件
- 手機端樣式自適應,格式化初始樣式插件
- 簡單的axios請求封裝,無權限
- npm安裝后綴-s或-d
- 系統環境變量
- 過濾字符串,不足兩位前面添加0
- 概念問題
- async和await的區別
- created和mounted區別
- link和@import區別
- 排他算法
- 數組方法
- 數組扁平化
- 數組去重
- 遍歷數組的四種方法
- vue數組中哪些方法時響應式的
- splice刪除數組遇到的坑
- 展開運算符(...)用法
- 冒泡排序
- 判斷數組中是否有重復
- 計算數組中某項出現的次數
- filter方法
- 將數組分割成多個指定長度的數組
- 常用數組方法整合
- 對象數據處理
- 合并對象:Object.assign( )
- Object.keys(),返回數組,自身枚舉對象
- Object.values使用
- Object.entries使用
- vue中使用svg
- svg組件
- vue滑塊驗證
- 方法一:滑塊驗證
- 方法二:滑塊插件
- vue配置不同的啟動和打包環境
- js過濾日期
- js獲取指定日期前一個月日期
- js指定日期與當前日期比較
- js截取字符串
- js截取字符串最后的逗號
- js截取圖片后綴
- 前端監聽網絡
- vue.config.js解析
- 常用正則
- 閉包概念+閉包防抖節流
- vue插槽
- 網絡安全欄
- canvas指紋追蹤技術
- exif照片信息
- xss攻擊
- vue中操作引導
- 封裝全局loading組件
- vue更換主題方案(手動)
- vue項目打包優化
- 組件遞歸案例
- Promise及異步操作介紹
- vue-cli打包的dist文件怎么直接運行
- 瀏覽器頁簽通信(BroadcastChannel)
- nginx配置