- 使用vite搭建項目盾碗，使用一行命令解決
npm init @vitejs/app <project-name> --template vue-ts
cd <project-name>
npm install
npm run dev
vite2+ts+vue3項目可以啟動了媚污。
選擇安裝vue相關依賴配置，我使用了router廷雅、vuex耗美、sass、axios等
npm install vue-router@4 --save
npm install vuex@next --save
npm install sass --save -dev
npm install axios --save
- router航缀，在src目錄下新建router/index.ts文件
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('/@/views/Home.vue')
},
{
path: '/lifeCycle',
name: 'lifeCycle',
component: () => import('/@/views/LifeCycle.vue')
}
]
export default createRouter({
history: createWebHistory(),
routes
})
- vuex商架，在src目錄下新建store/index.ts文件
import { createStore } from "vuex";
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {},
});
- axios，在src目錄下新建utils/
import axios from "axios";
const service = axios.create({
baseURL,
timeout,
});
// 發(fā)起請求之前的攔截器
service.interceptors.request.use(
config => {
/* 請求攔截的信息配置等 */
return config;
},
error => Promise.reject(error)
);
// 響應攔截器
service.interceptors.response.use(
response => {
return res;
},
error => {
return Promise.reject(error);
}
);
export default service;
- 我習慣使用.env.*文件配置芥玉，方便調整生產與開發(fā)等模式的一些配置
# 新建.env.*文件
# vite使用VITE_*開頭來命名全局的變量
VITE_SERVE_URL='http://***.****.***'
在項目中可使用 import.meta.env.* 來獲取定義的變量
- 開始配置vite.config.ts蛇摸，在vite.config.ts中，需要配置loadEnv來獲取.env.*文件的變量
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
function pathResolve(dir) {
return resolve(__dirname, '.', dir);
}
export default ({ mode }) => {
return defineConfig({
plugins: [vue()],
base:'./',
server: {
host: '0.0.0.0',
port:80,
// 代理設置
proxy: {
'/api': {
// 獲取.env.* 的配置
target: loadEnv(mode, process.cwd()).VITE_SERVE_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
css: {
preprocessorOptions: {
scss: {
// 全局scss變量配置
additionalData: "@import './src/*.scss';",
},
},
},
resolve: {
alias: {
// 別名配置
'@': pathResolve('src/'),
},
},
});
};
- 別名設置需要在tsconfig.json文件中再次聲明路徑信息
"paths": {
// 根據別名配置相關路徑
"@/*": ["./src/*"],
}
- 初步踩坑灿巧，邊用邊學赶袄，有建議可以分享一下，大家一起學習 ^_^ ^_^ ^_^
