vite2 + vue3 + antd3.2.2项目创建

一、所需环境

npm = 6.13.4,  node > 12

二、步骤

1、npm init @vitejs/app  
2、npm install 
3、vite2没有dev，所有npm run dev无效【但是可以在ide中运行】
	也可以在vite.config.js中配置
	export default defineConfig({
  	  plugins: [vue()],
	  define: {
	    'process.env': {}
	  },
	}]
4、npm install --save vue-router@next
5、npm install --save vuex@next
6、npm install axios --save
7、npm install ant-design-vue@3.2.2 --save
8、npm install less less-loader --dev
9、npm i vite-plugin-components -D	

三、配置

**vite.config.js**

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
const path = require('path')
export default defineConfig({
  base: "",
  plugins: [
    vue(),
    ViteComponents({
      customComponentResolvers: [AntDesignVueResolver()],
    })
  ],
  define: {
    'process.env': {}
  },
  resolve: {
    alias: {
      "/@": path.resolve(__dirname, 'src'), // 路径别名,
    },
    //需要省略的文件后缀名 注意：如果在此处配置了忽略的后缀名在引入时如果带有后缀名会报错
    extensions: [".vue", ".js"]
  },
  optimizeDeps: {
    include: ['axios'],
  },
  build: {
    target: 'modules',
    outDir: 'dist',
    assetsDir: 'assets',
    //minify: 'terser' // 混淆器
  },
  server: {
    cors: true,
    open: false,
    host: '0.0.0.0',  //域名
    proxy: {
      '/api': {
        target: 'http://localhost:3000',   //代理接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

  css: {
    modules: false,
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      }
    },
  }
})

**main.js**

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store";
import axios from './axios';
import { DatePicker } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.use(router)
.use(store)
.use(DatePicker)
.mount('#app')

**router.index.js**

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("/@/views/Home"),
  },
  {
    path: "/about",
    name: "About",
    component: () => import("/@/views/About"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

**axios.index.js**

'use strict';
import axios from "axios";

let config = {
    // baseURL: process.env.baseURL || process.env.apiUrl || ""
    // withCredentials: true, // Check cross-site Access-Control
    baseURL: 'http://localhost:8000',
    timeout: 5 * 1000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
    function (config) {
        // Do something before request is sent
        return config;
    },
    function (error) {
        // Do something with request error
        return Promise.reject(error);
    }
);

// Add a response interceptor
_axios.interceptors.response.use(
    function (response) {
        // Do something with response data
        return response;
    },
    function (error) {
        // Do something with response error
        return Promise.reject(error);
    }
);

// Post请求
_axios.post = (url, params) => {
    return axios({
        method: "post",
        url,
        data: params,
        headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
    }).then(res => {
        return Promise.resolve(res);
    }).catch(err => {
        return Promise.reject(err);
    });
};

// Get请求
_axios.get = (url, data) => {
    return axios({
        method: "get",
        url: config.baseURL + url,
        params: data
    }).then(res => {
        return Promise.resolve(res);
    }).catch(err => {
        return Promise.reject(err);
    });
};

export default _axios