webPack转vite所遇到的问题

webPack转Vite所遇到的问题

提供一个简单的方法

如果项目不是很复杂的话 可以直接

安装wp2vite

npm install -g wp2vite
or
yarn global add wp2vite

到你的项目目录下启动wp2vite

// 执行wp2vite的命令行
wp2vite 
or 
wp2vite init

然后安装依赖&启动项目

// 安装依赖
npm install

// 启动项目
npm run dev // 如果原先你的项目有dev script，请执行下面的命令
or
npm run vite-start

一、配置config文件

1. 首先配置vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default ({ mode }) => {
  console.log(loadEnv(mode, process.cwd()).NODE_ENV)
  return defineConfig({
    plugins: [vue()],
    base: loadEnv(mode, process.cwd()).NODE_ENV, // 打包路径
    // 别名
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')// 设置别名
      }
    },
    // 全局css
    css: {
      preprocessorOptions: {
        scss: {
        // 全局的scss ，跨域放多个，例如：主题的变量，和一些混合等
          additionalData: '@import "./src/assets/styles/";'
        }
      }
    },
    // 代理服务
    server: {
      port: 4001, // 启动端口
      open: true,
      proxy: {
        // 第一个代理
        '/api/mobile': { // 匹配到啥来进行方向代理
          target: 'https://github.com/cll123456/vue3-ts-mobile', // 代理的目标
          rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空，这个
        },

        // 第二个代理
        '/api/md': {
          target: 'https://editor.csdn.net/md?not_checkout=1&articleId=115252632', // 代理网址
          changeOrigin: true, // 支持跨域
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  })
}

2. 改变 文件路径

如果之前是用vue-cli构架的话，将在public里的index.html拖拽出至于config文件同级目录。

3. 安装vite 及其插件

yarn add vite // 安装vite
yarn add @viteje/pulgin-vue // 这里是vue3.0所对应的plugin包其他版本有对应的下载指令

4. 在package中加入启动命令

"serve2": "vite",
"build2": "vite build",

5. URI malformed 错误

   若HTML中link 中有%会报URI malformed 错误
   如果是icon的话 在public文件夹中直接写入文件名即可

6. createWebHashHistory（process.env.BASE_URL）导致页面无法渲染

   因为vue.config.js停用 则 process为undefined
   所以我们可以用import.meta去传递需要传递的数据，

   部署细节:

   **一定一定一定要注意文件名不要缩写 不要.env.deve 或者 .env.prod **

   // 具体咋配可以自定义但还是规范些语义化些好些

   .env.development

   NODE_ENV = ‘development’
   VITE_APP_BASE_API = ‘development’

   .env.production

   NODE_ENV = ‘production’
   VITE_APP_PROJECT_ENV = ‘manage’