vite2+ts+vue3项目创建（一）

• 使用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,
});
// 发起请求之前的拦截器
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.*文件配置，方便调整生产与开发等模式的一些配置

# 新建.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/*"],
    }

• 初步踩坑，边用边学，有建议可以分享一下，大家一起学习 ^_^ ^_^ ^_^