vite创建项目

  1. cmd 输入命令行
npm init @vitejs/app
  1. 输入项目名称
  2. 选择创建方式及创建内容
  3. 切换到创建项目文件夹
  4. 安装依赖
npm install 或npm i
  1. 创建完成
  2. 用vscode打开指令 
code .

相关配置内容

"scripts": {
    "dev": "vite --open",//--open 启动完成后自动打开浏览器
    "build": "vite build",
    "preview": "vite preview --open"//--open 启动完成后自动打开浏览器
  }

vite配置 base: 基础路径配置,打包后静态资源路径为相对路径

base:'./',//默认为"/"

alias：长地址用简短字符代替

"comp":resolve(__dirname,"src/assets/images/"),//组件存放位置文件夹
"/images":"./src/assets/images"//静态资源路径使用相对地址，地址'./xxx/xxx'，否则开发模式会报错

build打包 terserOptions生产环境移除console.log

build: {
    minify: 'terser',//必须配置为terser,否则terserOptions不起作用
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    }
  }

rollupOptions：打包输出文件夹的配置

rollupOptions:{
      output: {
        chunkFileNames: 'js/[name]-[hash].js', //入口文件：文件名+hash值格式
        entryFileNames: 'js/[name]-[hash].js', //出口文件：文件名+hash值格式
        assetFileNames: '[ext]/[name]-[hash].[ext]', //静态文件：以后缀为文件夹名称，文件名+hash值格式
      }
    }

mock.js 随机生成数据

server proxy跨域代理

server: {
        proxy: {
            '^/ss': {
                target: 'xxx',//跨域网址
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/ss/, ''),
            },
        },
    },

开发环境及生产环境变量替换 .env.development 文件---开发环境

VITE_BASE_API=""

.env.production 文件---生产环境

VITE_BASE_API=""

全局安装 npm-check-updates

$ npm install -g npm-check-updates

在当前项目的目录下执行以下命令，查看所有存在的更新

$ ncu

也可以通过执行以下命令查看所有可用的相关命令行 (命令变动或者无效时查看命令)

$ ncu -h

更新包

$ ncu -u

忽略项目中引入的各个依赖模块之间依赖相同但版本不同的问题，以npm v3-v6的方式去继续执行安装操作

npm install --legacy-peer-deps