vite2.x+vue3.x项目配置

1.创建项目

npm create vite@latest demo
1

2.配置环境变量

vite 提供了开发模式和生产模式

这里我们可以建立 4 个 .env 文件，一个通用配置和三种环境：开发、测试、生产。
env文件中的变量名建议以VITE_APP开头，和vue cli中的VUE_APP相同 ，用法也一致

1. .env文件 通用配置 用来配置一些公用的，栗子：网页的title
2. .env.dev文件 开发环境配置 以api url为例 VITE_APP_PROXY_URL=/api
3. .env.test文件 测试环境配置 以api url为例 VITE_APP_PROXY_URL=/api
4. .env.prod文件 测试环境配置 以api url为例 VITE_APP_PROXY_URL=/apiProd

在写api的时候哦 可以这么使用

const baseUrl = import.meta.env.VITE_APP_PROXY_URL
export const getTabList = (params) => {
  return axios({
    method: 'post',
    url: baseUrl + 'QueryTabReq',
    data: params
  })
}
1
2
3
4
5
6
7
8

3.配置alias别名@

vite.config.ts

import { resolve } from 'path' // 编辑器提示 path 模块找不到，可以npm install  @types/node --dev

 resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
1
2
3
4
5
6
7

4.添加router

npm install vue-router@next
1

创建 router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/index',
    name: 'index',
    component: () => import( '@/components/HelloWorld.vue')
  },
]
const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14

修改main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'

const app = createApp(App)

app.use(router).mount('#app')
1
2
3
4
5
6
7
8

5.添加 store

npm install vuex@next --save
1

创建 store/index.ts

import { createStore } from 'vuex'

const modulesFiles = import.meta.globEager('./modules/*.ts')
const pathList = []

for (const path in modulesFiles) {
  pathList.push(path)
}

const modules: any = pathList.reduce((modules: any, modulePath) => {
  const moduleName: string = modulePath.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')
  const value: any = modulesFiles[modulePath]
  modules[moduleName] = value.default
  return modules
}, {})

const store = createStore({
  modules
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

创建store/modules/user.js

interface IState {
  username: string,
  corp_name: string
}
const state = {
  username: 'dddd',
  corp_name: 'ddds'
}
const mutations = {
  SET_CORP_NAME: (state: IState, corp_name: string) => {
    state.corp_name = corp_name
    // setSetting('corp_name_depart', corp_name, 1)

  },
}
export default {
  namespaced: true,
  state,
  mutations,
  // actions
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

修改main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
const app = createApp(App)

app.use(router).use(store).mount('#app')

1
2
3
4
5
6
7
8
9

在home.vue 中使用

1
2
3
4
5
6
7
8
9
10

6.安装sass

npm i sass sass-loader node-sass -D
1

配置全局css,在 vite.config.ts中添加

  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 此处修改为要被预处理的scss文件地址
        additionalData: `@import "./src/assets/scss/glocal.scss";`,
      }
    }
  },
1
2
3
4
5
6
7
8
9

7.安装element-plus

npm install element-plus --save
1