vite替换webpackindex.html 插件卸载插件新增 api替换环境变量 vuex require 资源

index.html

// 该文件需挪到根目录，并做相应修改
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> -->
    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
    <link rel="icon" href="/favicon.ico" />
    <title>Hard Coded Title</title>
  </head>
  <body>
    <noscript>
      <!-- <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      > -->
      <strong
        >We're sorry but this app doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

插件卸载

core-js
sass-loader
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",

插件新增

"@originjs/vite-plugin-require-context": "^1.0.9",
"@typescript-eslint/eslint-plugin": "^5.40.0",
"@vitejs/plugin-vue": "^3.1.0",
"@vitejs/plugin-vue-jsx": "^2.0.1",
"eslint-config-standard-with-typescript": "^23.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.3.0",
"eslint-plugin-promise": "^6.1.0",
"eslint-plugin-vue": "^9.6.0",
"postcss": "^8.4.16",
"postcss-pxtorem": "^6.0.0",
"sass": "^1.55.0",
"sass-loader": "^13.2.0",
"typescript": "^4.8.4",
"vite": "^3.1.0",
"vite-plugin-eslint": "^1.8.1",
"vue-tsc": "^0.40.4"

api替换

// require.context

环境变量

必须以 VITE_ 开头
// VITE_VUE_APP_I18N_LOCALE=ch

vuex

// vuex的持久化 使用插件vuex-persistedstate
// modules/layout.js
const state = {
    ...
};

const getters = {
    ...
};

const mutations = {
  ...    
};

const actions = {
  ...
};

export default {
    state,
    mutations,
    getters,
    actions,
    namespaced: true, // 必加 （否则会报 namespace 错误）
}


// store.js
import { createStore } from 'vuex'

import createPersistedState from 'vuex-persistedstate';
import layout from './modules/layout'

const dataState = createPersistedState({
  paths: ['data']
})

const store = createStore({
  modules: {
    layout,
  },
  strict: import.meta.env.NODE_ENV !== 'production',
  plugins: [dataState]  // 默认存储到本地local Storage
})

export default store

require

换成import就行

资源地址相关

// vite.config.js
// 根据项目中的url做相应变更
resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(projectRootDir, 'src')
      },
      //  这里主要针对的是assets文件夹中的url
      {
        find: '~@',
        replacement: resolve(projectRootDir, 'src')
      },
      {
        // 针对scss模块
        find: /^~(.*)$/,
        replacement: '$1',
      }
    ],
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue','.scss', '.css']
  },

最后再build 检查下