vite構建專案步驟以及所遇到的坑，要注意的事項

前端周哥發表於2021-08-27
Vite

@TOC

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

安裝yarn

首先用yarn命令進行安裝，沒有這個命令的同學可以先安裝一下
npm install yarn -g

安裝vite專案並啟動

yarn create vite-app <project name>
cd  專案名稱 進入目錄即可
 yarn install
 yarn dev

配置檔案為vite.config.js
啟動配置檔案和webpack方式一樣 package.json裡 "dev": "vite --config ./vite.config.js"

const {resolve} = require('path')
export default {
    alias: {
         '/@/': resolve(__dirname, './src')
    }
}

注意： 這裡定義@目錄時，前面必須要新增斜槓/表示從根目錄進來獲取元件。而根據上面的定義則表示/@這個符號直接會指向根目錄下的src資料夾

vue中路由的配置使用時如下
component: () => import('@/components/HelloWorld2.vue'),
改為
component: () => import('/@/components/HelloWorld2.vue'),
如果沒有這個/@則呼叫的位置會自動從@node_module裡去查詢目錄，導致路徑始終獲取失敗。

檔案目錄配置好之後我們就可以建立路由

安裝路由：

yarn add vue-router@next // 先安裝路由

建立路由檔案並配置路由

根目錄下建立資料夾router,在到router裡建立路由檔案router.js
程式碼如下：

import { createRouter, createWebHistory } from "vue-router";
// 路由資訊
const routes = [
    {
        path: "/aaa",
        name: "aaa",
        component:  () => import('/@/components/HelloWorld2.vue'),
    }
];
// 匯出路由
export default createRouter({
  history: createWebHistory(),
  routes,
});

引用路由

路由雖然建立好了但沒有用到當前專案中，所以我們需要引用路由
在根目錄下有個main.js檔案 程式碼改為如下

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index.js'
var app = createApp(App)
app.use(router)
app.mount('#app')

也就是app.use(router)則表示使用了路由
注意： import Vue from 'vue' 這種寫法也不再支援了，新增進來就報錯，所以要引用裡面的cteateApp方法則只能改為

import { createApp } from 'vue'

在scr/config/index-vite.js 中可配置代理伺服器

var config = {
      title: 'guiplan,element-plus', // 後臺標題
      localUrl:'http://127.0.0.1:7070/',
      baseUrl: { // api請求基礎路徑
        dev: '/user/list', // 開發環境下的介面地址
        pro: '/' // 正式環境介面地址
      }
}
module.exports = config

vite.config.js 配置

const {resolve} = require('path')
const config = require('./src/config/index-vite.js')
var obj = {
    alias: {
         '/@/': resolve(__dirname, './src')
    },
    proxy:{
    }
}
obj.proxy[config.baseUrl.dev] = {
    target: config.localUrl,
    changeOrigin: true,
    // rewrite: path => path.replace(/^\/api/, '')
}
export default obj

整個流程為當前端後續地址為/user/list時，將指向localUrl地址
注意： 而且 還會將地址新增到localUrl字尾中也就是如下圖
在這裡插入圖片描述
還要注意：每次修改vite相關配置得重啟一下服務。也就是修改vue檔案會自動更新，但修改配置檔案則需要重啟服務。（這一塊不注意的話，你會一直認為配置都不起效而陷入死迴圈中）

在這裡插入圖片描述
npm run dev 只要報錯，基本就是不能打包的。
這邊用的SFC規範，所以只能根據提示 格式化程式碼，讓其定位錯位位置。
如上圖 3：4106 表示第三行第4106列位置。然後逐個排查錯誤。
vite根據SFC規範所以對程式碼格式也有了很多的要求，比如單標籤你不能再用雙標籤的形式去書寫了。
還有的指令也不再支援了比如在div標籤中新增v-text指令也會報錯等等。
常見錯誤有：

  1. 單標籤按雙標籤格式排版
  2. v-text指令使用也會報錯，放到div中直接報錯
  3. 重複的指令或屬性如一個div寫了兩個class,或者兩個v-for
  4. 屬性之間沒有空格分割如下圖
    在這裡插入圖片描述

目前我已開源，前後端程式碼都有。雖然暫時還不太成熟。但也可以用來學習交流或者進行二次開發。配合guiplan開發工具一件生成vue，做專案也是會事半功倍。
gitee.com/guiplan/element-plus-vit...

我的文章與其他的不同，我會把每個我踩過的坑都記錄下來，新增一個 注意 提示來防止以後還會踩到，而我分享出去的之後希望大家也多留意這些注意事項，因為每一個注意事項都是一個坑，如果不去注意就會耗費大把時間去排除問題，要走很多彎路。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章