本文基于上一篇《vue3项目开发实战》之vite2创建项目_小洋葱的博客-CSDN博客

在使用vite生成项目后，缺少vuex,router等插件和配置。

 

1. 配置vite2   【vite.config.ts】

配置 Vite | Vite 官方中文文档https://cn.vitejs.dev/config

 1.1 别名resolve.alias

  resolve:{
    alias:{
      '/@/': '/src/'
    }
  }

1.2 css预处理器

#css插件安装，我用的less
npm install less less-loader --save-dev  #安装less

# npm install sass node-sass sass-loader --save-dev  #安装sass

  css:{
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${'/@/src/assets/style/varient.less'}";`
          //公共变量文件指定（eg.字体大小，颜色）
        },
        javascriptEnabled: true,
      },
      // scss: {
      //   additionalData: `@import "/@/assets/style/variables.scss";`
      // }
    }
  }

 1.3 开发服务器选项 root,base,server

  // root:'',//项目根目录（index.html 文件所在的位置）。可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。
  // base:'/xyc',//公共基础路径；项目访问http://localhost:3000/xyc/项目路由
  server:{
    // host: "127.0.0.1",
    // port: 3000,
    https: false,
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
  },

1.4 构建选项