Label Studio是一種基于Web的開源注釋工具，旨在幫助數據科學家和機器學習工程師更輕松地創建高質量的標簽數據集。它支持多種類型的注釋任務，如文本分類、實體識別、圖像分類等，并且可以集成到現有的機器學習流程中。Label Studio還具有可擴展性和靈活性，可以適應不同的數據類型和注釋需求。
Label Studio的使用一般分為三個階段：部署、標注和導出數據。
部署：可以通過下載源代碼進行本地安裝，也可以使用Docker容器快速部署。此外，Label Studio還提供了在云端使用的選項，如Amazon Web Services（AWS）和Google Cloud Platform（GCP）。
標注：通過創建項目、上傳數據、定義任務類型和注釋模式等步驟，可以開始進行標注。Label Studio支持多種注釋任務，如文本分類、實體識別、圖像分類等。標注人員可以在網頁上直接進行標注，也可以使用API或CLI工具進行標注。
導出數據：標注完成后，可以將標注結果導出為不同格式的數據集，如JSON、CSV、TSV、YAML等，以供機器學習算法使用。
對于開發者而言，可以通過自定義插件和擴展來定制化和豐富Label Studio的功能。Label Studio提供了完備的文檔和API參考，使得開發者可以更加便捷地進行開發和調試工作。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
import React, { useState } from 'react';
function BasicForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const handleChange = (event) => {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
};
const handleSubmit = (event) => {
event.preventDefault();
console.log(formData);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" name="name" value={formData.name} onChange={handleChange} />
</label>
<label>
Email:
<input type="email" name="email" value={formData.email} onChange={handleChange} />
</label>
<label>
Message:
<textarea name="message" value={formData.message} onChange={handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
export default BasicForm;
此表單組件具有三個輸入字段：名稱、電子郵件和消息。useState Hook 用于存儲表單數據，并且 handleChange 函數處理輸入字段值的更改。handleSubmit 函數在提交表單時被調用并打印出表單數據至控制臺。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
React 是由 Facebook 開發的一個用于構建用戶界面的 JavaScript 庫。以下是 React 快速入門的步驟：
安裝 React：可以通過命令行工具使用 npm 或者 yarn 安裝 React。
創建 React 應用程序：可以使用腳手架工具（如 create-react-app）快速創建基本的 React 應用程序。
編寫組件：React 的核心是組件，您需要編寫組件來構建應用程序。組件是一個可重復使用的代碼塊，它包含了 HTML 和 JavaScript 代碼。
渲染組件：使用 ReactDOM.render() 方法將組件渲染到頁面上。
處理事件：React 使用類似 HTML 的語法來處理事件。在組件中定義事件處理程序，例如 onClick 或者 onSubmit，并將其綁定到相應的元素上。
狀態管理：React 允許您使用狀態來管理數據。您可以使用 setState() 方法更新組件的狀態，并在組件中讀取狀態以顯示不同的內容。
生命周期：React 組件有生命周期方法，這些方法允許您在組件生命周期內執行操作。例如，componentDidMount() 方法在組件被掛載后執行一次，用于初始化數據。
這些是 React 快速入門的基本步驟。要深入了解 React，請查閱相關文檔和教程。
React 生命周期指的是React組件在掛載（mounting）、更新（updating）和卸載（unmounting）等不同階段所經歷的生命周期方法，包括：
其中，constructor()是組件實例化時第一個被調用的方法；static getDerivedStateFromProps()將props映射為state的方法；render()渲染組件的虛擬DOM；componentDidMount()在組件掛載后執行；shouldComponentUpdate()控制組件是否需要重新渲染；getSnapshotBeforeUpdate()捕獲更新前的DOM狀態；componentDidUpdate()在組件更新后執行；componentWillUnmount()在組件卸載前執行清理操作。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Vue組件實例在創建、更新和銷毀過程中，會依次觸發一些鉤子函數，這些鉤子函數稱為Vue生命周期函數。Vue的生命周期分為四個階段：創建階段、掛載階段、更新階段和銷毀階段。
在創建階段，Vue實例正在被創建，這個階段中包含了實例化、數據觀測、事件/鉤子初始化等過程。具體包括以下鉤子函數：
在這個階段，Vue實例將模板渲染成真實的DOM并進行掛載到頁面上。具體包括以下鉤子函數：
在這個階段，當Vue實例的數據變化時，它會重新渲染虛擬DOM并更新到頁面上。具體包括以下鉤子函數：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
使用layui實現前端換膚功能可以通過以下幾個步驟完成：
安裝layui：我們需要從官方網站下載安裝layui。你可以在https://www.layui.com/下載最新版本。
引入樣式文件：在HTML頁面中引入需要的樣式文件。我們可以使用layuicss提供的樣式表來實現各種外觀效果。如果您需要自定義樣式，請創建自己的CSS文件，并在HTML中引入。
創建主題顏色列表：我們需要創建一個包含所有可用主題顏色的列表。您可以使用數組或JSON對象來創建此列表。例如：
javascript復制代碼
var themeColors = [
{name: '默認', color: '#009688'},
{name: '橙色', color: '#FFB800'},
{name: '墨綠', color: '#393D49'},
{name: '紫色', color: '#800080'},
{name: '深藍', color: '#285FD3'}
];
javascript復制代碼
layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker; // 初始化顏色選擇器 colorpicker.render({ elem: '#theme-color-picker',
colors
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Vue.js是一款非常流行的JavaScript框架，用于構建單頁Web應用程序（SPA）。它的設計目標是簡單、靈活和易于使用。Vue.js提供了許多有用的功能，可以幫助開發人員更輕松地構建響應式、動態的用戶界面。在本文中，我們將介紹Vue.js的基礎知識，以及如何使用Vue.js來創建一個簡單的Web應用程序。
首先，讓我們來看一下Vue.js的核心思想。Vue.js采用了MVVM（Model-View-ViewModel）的架構模式。這種模式將應用程序分為三個部分：模型（Model）、視圖（View）和視圖模型（ViewModel）。模型表示應用程序的數據，視圖表示UI，而視圖模型則是將兩者鏈接起來的橋梁。Vue.js的核心就是它的響應式系統。當模型的狀態發生改變時，視圖會自動更新，反之亦然。這使得開發人員可以更加專注于業務邏輯的實現，而不需要手動處理DOM操作。
接下來，讓我們看一下Vue.js的基礎語法。Vue.js通過指令（Directive）來擴展HTML。指令以v-開頭，并且在表達式中使用。例如，v-bind指令用于將一個屬性綁定到表達式上，v-model指令用于雙向綁定表單元素和應用程序狀態之間的數據。Vue.js還提供了許多其他指令，
一、核心概念
模板語法：Vue.js使用了一種類似于HTML的模板語法來聲明渲染和組合DOM元素。模板語法被稱為Vue指令，可以通過{{ }}和v-前綴在模板中使用。其中{{ }}用于文本插值，而v-則用于Vue.js提供的各種指令。
數據綁定：Vue.js的核心是響應式數據綁定系統，它能夠自動跟蹤并響應數據對象和視圖之間的變化。當數據發生變化時，Vue會立即更新視圖以反映這些變化。
組件化：Vue.js允許我們將UI分解為可重用和獨立的組件。每個組件都有自己的狀態和行為，并且可以與其他組件組合使用。這種組件化方法使得代碼更容易維護、測試和復用。
生命周期鉤子函數：Vue.js提供了一組生命周期鉤子函數，在不同階段執行自定義邏輯。這些鉤子函數包
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
layui是一款基于jQuery的前端UI框架，它的設計理念是“零門檻”，使得開發者可以快速地構建出美觀、易用的界面。下面將從以下幾個方面介紹layui框架的使用。
你可以從layui官網下載最新版本的layui壓縮包，也可以使用npm進行安裝。在HTML文件中，只需要引入layui.js和layui.css兩個文件即可開始使用：
html復制代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Webpage</title> <link rel="stylesheet" href="path/to/layui/css/layui.css"> </head> <body> <script src="path/to/layui/layui.js"></script> </body> </html>
layui提供了許多常用的UI組件，例如按鈕、表單、彈窗、選項卡等。這些組件可以通過簡單的html標簽和屬性來創建。例如，如果您想要創建一個按鈕，只需要使用以下代碼：
html復制代碼
<button class="layui-btn">按鈕</button>
同時，layui還提供了一些特殊類型的按鈕，如次要按鈕、禁用按鈕、圓角按鈕等。
layui提供了一套默認的主題風格，但是如果您想要自定義樣式，layui同樣提供了很好的支持。您可以通過修改layui.css文件或者使用自定義CSS覆蓋默認樣式，來實現您想要的效果。
layui 是一款基于 jQuery 的前端 UI 框架，它具有簡潔、易用和高效的特點，非常適合快速開發響應式界面。下面是使用 layui 框架的示例。
首先，需要在 HTML 文件中引入 layui 的樣式文件和腳本文件：
復制代碼
<!-- 引入樣式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <!-- 引入腳本文件 --> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.min.js"></script>
接著，在 HTML 文件中編寫相應的結構和內容，并使用 layui 提供的組件進行布局和樣式設置。例如，可以使用 layui 的表格組件來展示數據：
復制代碼
<table class="layui-table"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>22</td> <td>女</td> </tr> <tr> <td>王五</td> <td>21</td> <td>男</td> </tr> </tbody> </table>
除了表格組件，layui 還提供了很多其他的組件，如按鈕、輸入等...
去年在博客中發了兩篇關于GIF動態生成的博客，GIF圖像動態生成-JAVA后臺生成和基于FFmpeg的Java視頻Mp4轉GIF初探，在這兩篇博客中都是采用JAVA語言在后臺進行轉換。使用JAVA的同學經過自己的改造和開發也可以應用在項目上。前段時間有朋友私下問，有沒有不使用Java，甚至不依賴于后臺的，直接基于前端的GIF動圖生成，有沒有這種技術方案。博主個人對前端不是很擅長，后來也是在github上自習搜索了一番，發現了一個比較有意思的，可以直接在前端使用的gif動態圖生成組件。本文重點聊聊gif.js組件，介紹一下gif這個組件的基本原理，在生產中如何進行使用。
gif.js在github的地址是：gif.js,打開它的官方網站，可以看到如下的介紹：
作為一款成熟的插件，在github上有4.5k的star，足以說明它的受歡迎程度。而且gif.js采用的是寬松的MIT協議，您可以隨意下載這個插件，再此基礎之上改造成自己的工具供別人使用。使用git clone將工程下載到本地后，可以看到gif.js的初始目錄。
打開工程目錄的package.json文件，這里定義了文件基礎依賴。打開后可以看到如下的定義信息：
在GIFEncoder.js文件中定義了gif.js對象了基本一些屬性，在上面的目錄中打開目標文件后，可以看到屬性定義方法：
核心方法API說明：您可以使用構造方法或者使用setOptions（）方法類設置相關的屬性。詳情可以看下面的說明：
|
Name |
Default |
Description |
|
repeat |
0 |
repeat count, -1 = no repeat, 0 = forever |
|
quality |
10 |
pixel sample interval, lower is better |
|
workers |
2 |
number of web workers to spawn |
|
workerScript |
gif.worker.js |
url to load worker script from |
|
background |
#fff |
background color where source image is transparent |
|
width |
null |
output image width |
|
height |
null |
output image height |
|
transparent |
null |
transparent hex color, 0x00FF00 = green |
|
dither |
false |
dithering method, e.g. FloydSteinberg-serpentine |
|
debug |
false |
whether to print debug information to console |
下面采用具體的代碼進行一個實際例子的實踐。
這里以video2.html為例，在這個工程中引入了gif.js和gif.worker.js。工程目錄如下，Jquery.js作為非必須依賴。
-
<head>
-
<meta charset="utf-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
<title>視頻轉GIF</title>
-
<meta name="description" content="Full-featured JavaScript GIF encoder that runs in your browser.">
-
<meta name="keywords" content="gif, encoder, animation, browser, unicorn">
-
<meta name="viewport" content="width=device-width">
-
<meta property="og:title" content="gif.js">
-
<meta property="og:url" content="http://jnordberg.github.io/gif.js">
-
<meta property="og:description" content="Full-featured JavaScript GIF encoder that runs in your browser.">
-
<meta property="og:type" content="website">
-
<link rel="stylesheet" href="main.css">
-
<script src="gif.js?v=3"></script>
-
<script src="video.js?v=3"></script>
-
</head>
-
gif = new GIF({
-
workers: 4,
-
workerScript: 'gif.worker.js',
-
width: 600,
-
height: 337
-
});
定義好了gif對象之后，還需要定義相應的響應事件，如下代碼所示：
-
sample.addEvent('change', sampleUpdate);
-
-
button.addEvent('click', function() {
-
video.pause();
-
video.currentTime = 0;
-
gif.abort();
-
gif.frames = [];
-
return video.play();
-
});
-
-
gif.on('start', function() {
-
return startTime = now();
-
});
-
-
gif.on('progress', function(p) {
-
return info.set('text', "rendering: " + (Math.round(p * 100)) + "%");
-
});
-
-
gif.on('finished', function(blob) {
-
var delta, img;
-
img = document.id('result');
-
img.src = URL.createObjectURL(blob);
-
delta = now() - startTime;
-
console.log("done in\n" + ((delta / 1000).toFixed(2)) + "sec,\nsize " + ((blob.size / 1000).toFixed(2)) + "kb");
-
return info.set('text', "done in\n" + ((delta / 1000).toFixed(2)) + "sec,\nsize " + ((blob.size / 1000).toFixed(2)) + "kb");
-
});
代碼有點長，這里不一一列出，需要源代碼的可以私信。
使用nginx進行靜態發布后，可以看到如下的效果：
點擊執行按鈕后，在網頁下面生成gif動態圖，如下所示：
實際生成的動態圖會根據原始視頻的大小，畫質質量，清晰度等因素影響，執行時間也會有影響。在實際項目中需要根據需要調整相應的參數才可以。
以完成后渲染動圖為例講解合成過程，
可以在變量區看到客戶端開啟了多個Worker進行并行處理。
在這里進行數據合并處理，如下：
最終合成gif圖片，在html中進行dom渲染。
以上就是本文的主要內容，本文重點介紹了一款前端基于Javascript的gif.js生成插件，分析了它的源碼結構，最后通過一個實例進行了案例講解，幫您快速的了解和掌握這個組件，文章行文倉促，如有錯誤，請留言交流。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
在配置的過程中踩了很多坑，還是太菜，有些東西弄不明白什么意思。
運行項目時的報錯可直接到最下面看vite.config.js文件的注釋
目前項目用到的模塊并不多，package.json文件如下
-
{
-
"name": "PsWebV3Abb",
-
"version": "0.0.0",
-
"scripts": {
-
"dev": "vite",
-
"build": "vite build"
-
},
-
"dependencies": {
-
"@vitejs/plugin-vue": "^1.0.0",
-
"axios": "^1.2.1",
-
"element-plus": "^2.2.26",
-
"vite": "^4.0.3",
-
"vue": "^3.0.4",
-
"vue-router": "^4.1.5"
-
},
-
"devDependencies": {
-
"@vue/compiler-sfc": "^3.0.4"
-
}
-
}
其實主要還是這些模塊的版本兼容問題
vite的版本最開始是1.0.0，后面很多地方搞不下去了才卸載了重裝新的版本
當然還是建議仔細閱讀一下官方文檔，其實很多重要的點都講的很清楚，只不過是遇到問題的時候才會注意到。官方文檔請移步這里
下面簡單的說一下這個文件，
首先是文件的位置，放在其他位置是無效的：
運行vite項目的時候，就會自動解析根目錄下面的這個文件
我這里的主要目的還是解決項目運行時的跨域問題
下面是封裝的一個簡單的請求示例，其中service是一個封裝好的axios實例，可以指定一下baseurl，以及請求和響應攔截。
其他的API都可以像這樣通過給getItem添加方法的方式實現
-
import service from '../utils/requests.js'
-
-
const getItem = {}
-
-
getItem.getppitem = function (params) {
-
return service.get('api/AutoSimple/getdata', params)
-
}
-
-
export default getItem
vite.config.js 具體的配置如下
-
import { defineConfig } from 'vite'
-
import vue from '@vitejs/plugin-vue'
-
// import eslintPlugin from 'vite-plugin-eslint'
-
// https://vitejs.dev/config/
-
-
// 這個配置文件可能出現的問題：
-
// 首先是此文件放置的位置
-
// 1.未安裝 @vitejs/plugin-vue
-
// 處理方法：npm i @vitejs/plugin-vue@1.0.0
-
// 由于本項目vite版本1.0限制，只能用了plugin-vue的1.0.0版本,但在運行的時候又導致了問題2，
-
// 于是直接卸載vite重新安裝最新的3.0.4,這個版本直接install plugin-vue仍然不行，還是要用1.0.0版本
-
// 2.顯示不存在函數 defineConfig
-
// 在此之后npm run dev,又報了一個錯：Cannot find module 'node:path'
-
// 在掘金上看到是和node版本有關，更新后就可以正常運行了
-
-
export default defineConfig({
-
plugins: [
-
vue()
-
// 檢查代碼格式
-
// eslintPlugin({
-
// include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
-
// })
-
],
-
server: {
-
// 默認打開的端口和本地
-
// host: '0.0.0.0',
-
port: 3000,
-
https: false, // 不支持https
-
proxy: {
-
'/api': {
-
target: 'http://10.200.20.80/BARCODESERVICE', // 實際請求地址
-
changeOrigin: true, // 是否跨域
-
rewrite: (path) => path.replace(/^\/api/, '') // 對什么類的服務器匹配
-
},
-
}
-
}
-
})
-
在部署生產環境時，又遇到了兩個問題：
客戶環境是IIS服務器，為了節省端口，在部署的時候選擇在同一個網站下添加多個應用程序的方式，這就使得在部署時，需要添加公共的基礎路徑，這一點在官方文檔中有詳細的說明。
解決方案：
在package.json中配置
-
"scripts": {
-
"dev": "vite",
-
"build": "vite build --base=/PsWebDand/ "
-
}
vite.config.js 中的server的proxy無效，此時跨域的問題需要通過在后端服務中配置來解決
IIS服務器
-
<httpProtocol>
-
<customHeaders>
-
<add name="Access-Control-Allow-Headers " value="Content-Type,api_key,Authorization" />
-
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
-
<add name="Access-Control-Allow-Origin" value="*" />
-
</customHeaders>
-
</httpProtocol>
定義 Proxy 代理對象的 set 的時候，
要返回 return true 。
特別是在嚴格模式下，否則，會報錯 'set' on proxy: trap returned falsish for property 'message'
let handler = { get(obj, property) { }, set(obj, property, value) { return true; } } new Proxy({}, handler);
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
藍藍設計的小編 http://www.syprn.cn