webPack转vite所遇到的问题

最新推荐文章于 2024-10-11 07:12:56 发布

let user = 百晓生

最新推荐文章于 2024-10-11 07:12:56 发布

阅读量1.4k

点赞数 2

文章标签： javascript vue.js es6 typescript

本文链接：https://blog.csdn.net/WH_Crx/article/details/118106097

版权

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文件

首先配置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/, '')
        }
      }
    }
  })
}

改变文件路径

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

安装vite 及其插件

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

在package中加入启动命令

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

URI malformed 错误

若HTML中link 中有%会报URI malformed 错误
如果是icon的话在public文件夹中直接写入文件名即可
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’