vite2可以有很多配置拌滋，也可以都使用默認(rèn)配置朴沿，這個(gè)看項(xiàng)目需要。
vite.config.js
我們先看看 vite.config.js里面的常用配置败砂，其他配置可以看官網(wǎng)：https://cn.vitejs.dev/config/
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path" // 主要用于alias文件路徑別名
// 加別名的函數(shù)
function pathResolve(dir) {
return resolve(__dirname, ".", dir)
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()], // 配置需要使用的插件列表赌渣，這里將vue添加進(jìn)去
// 配置文件別名 vite1.0是/@/ 2.0改為/@
// 這里是將src目錄配置別名為 /@ 方便在項(xiàng)目中導(dǎo)入src目錄下的文件
resolve: {
alias: {
"/@": pathResolve("src"),
"/config": pathResolve("public/config"),
"/com": pathResolve("src/components")
}
},
base: "vue3-blog", // 便于發(fā)布到gitee
// 打包配置
build: {
target: 'modules',
// outDir: 'dist', //指定輸出路徑
// assetsDir: 'assets', // 指定生成靜態(tài)資源的存放路徑
minify: 'terser' // 混淆器，terser構(gòu)建后文件體積更小
},
// 本地運(yùn)行配置昌犹，及反向代理配置
server: {
cors: true, // 默認(rèn)啟用并允許任何源
open: true, // 在服務(wù)器啟動(dòng)時(shí)自動(dòng)在瀏覽器中打開應(yīng)用程序
//反向代理配置坚芜，注意rewrite寫法，開始沒看文檔在這里踩了坑
proxy: {
'/api': {
target: 'http://192.168.99.223:9000', //代理接口
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
別名
這里嘗試了好多種方法斜姥，發(fā)現(xiàn)這種可行货岭。主要是官網(wǎng)似乎也沒說 resolve 要 在哪里引用。base
默認(rèn)情況下疾渴，會(huì)認(rèn)為項(xiàng)目運(yùn)行在網(wǎng)站的根目錄里面千贯，但是有些情況下項(xiàng)目無法運(yùn)行在根目錄里面，
比如發(fā)布到GitHub搞坝，只能使用 https://naturefw.gitee.io/vue3-blog 這樣的目錄搔谴，那么這時(shí)候就需要設(shè)置這個(gè)base了。
也很簡(jiǎn)單base: "vue3-blog"這樣就可以桩撮，這樣發(fā)布打包的時(shí)候就可以正確設(shè)置js敦第、css等的引用路徑峰弹。反向代理
這個(gè)主要是處理ajax（axios）的跨域訪問的。以前對(duì)這個(gè)比較模糊芜果，不過嘗試之后就清晰了鞠呈。
跨域訪問
嘗試一下跨域訪問的方式。
- 安裝 axios
yarn add axios
- 前端測(cè)試代碼
然后在組件里面做一個(gè)簡(jiǎn)單的測(cè)試右钾。
import axios from 'axios'
const get = () => {
axios.get('api/a')
.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
}
- 后端測(cè)試代碼
后端使用node建立一個(gè)最簡(jiǎn)單的web服務(wù)
// server.js
const http = require('http');
http.createServer(function(request, response) {
// 設(shè)置響應(yīng)頭
response.writeHeader(200, {
"Content-Type" : "text/plain"
});
console.log('有訪問者')
// 響應(yīng)主體為 "Hello world!"
response.write("Hello world!");
response.end();
})
// 設(shè)置監(jiān)聽端口為9000
.listen(9000);
console.log('請(qǐng)打開：http://localhost:9000')
用 node server.js 運(yùn)行這個(gè)服務(wù)蚁吝。
- 測(cè)試運(yùn)行
- 運(yùn)行vue的項(xiàng)目，向后端申請(qǐng)數(shù)據(jù)舀射，
- 這時(shí)候會(huì)先提交到vite2啟動(dòng)的web服務(wù)窘茁，
- 然后判斷后再轉(zhuǎn)給node建立的web服務(wù)，
- 處理之后返給node建立的web服務(wù)脆烟，
- 最后返給瀏覽器山林。
前端得到的數(shù)據(jù)是這樣的：因?yàn)槭峭ㄟ^vite2建立的服務(wù)做周轉(zhuǎn)，所以不算跨域邢羔。
測(cè)試通過驼抹。
安裝ESlint
編寫代碼需要有一個(gè)共同的規(guī)范，雖然大家都有各自的習(xí)慣拜鹤，但是還是需要盡量的統(tǒng)一一下框冀，ESLint就是一個(gè)很好的選擇。
vue-cli建立項(xiàng)目的時(shí)候就非常簡(jiǎn)單署惯，我們選擇一個(gè)風(fēng)格就可以自動(dòng)安裝了左驾，現(xiàn)在vite2還不夠自動(dòng)化镣隶，需要我們自己安裝极谊，今天學(xué)習(xí)了一下，補(bǔ)充這塊短板安岂。
- 安裝
yarn add eslint
- 配置
問答的形式進(jìn)行配置轻猖。
npx eslint --init
對(duì)自己狠一點(diǎn)，我們選擇第三個(gè)域那，嚴(yán)格模式：
選擇 類型模塊咙边，選擇 JavaScript modules：
當(dāng)然選 vue.js 了
要不要用TS？目前不會(huì)次员，先不用了败许。
代碼在哪里運(yùn)行淑蔚？注意這是多選市殷，那就都選好了。
進(jìn)入重點(diǎn)環(huán)節(jié)了刹衫，開始選擇代碼風(fēng)格了醋寝。這個(gè)大概是問你搞挣，要套餐還是單點(diǎn)，符合主流音羞，我們選套餐囱桨。
vue-cli4.5建立的項(xiàng)嗅绰， 選擇的是 Standard config （ESLint+標(biāo)準(zhǔn)配置）舍肠，所以這里選第二項(xiàng)。據(jù)說這些都是各位大虐煜荩總結(jié)出來的貌夕，我們按照這個(gè)來就好。
選擇配置文件的格式民镜，這里選擇js
立即執(zhí)行啡专？
其實(shí)我是想用 yarn 安裝的，但是又不知道怎么寫制圈。
yarn add
eslint-plugin-vue@latest
eslint-config-standard@latest
eslint@^7.12.1
eslint-plugin-import@^2.22.1
eslint-plugin-node@^11.1.0
eslint-plugin-promise@^4.2.1
也許是這么寫吧们童。
果然還是應(yīng)該用 yarn 來安裝。
VSCode 使用 ESLint 配置文件需要去插件市場(chǎng)下載插件 ESLint 鲸鹦。
