日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
Vue2系統(tǒng)如何快速遷移Vite作為開(kāi)發(fā)工具

當(dāng)前版本 vite@2.3.7

一. 適合什么項(xiàng)目遷移

  1. 使用 vue2 的系統(tǒng)
  2. 內(nèi)部系統(tǒng) - 無(wú)需大型流量場(chǎng)景：因?yàn)?vite 更迭較快，導(dǎo)致系統(tǒng)需要定期改動(dòng)基礎(chǔ)功能，造成不穩(wěn)定
  3. 非 SSR 系統(tǒng) - SSR 還有很多問(wèn)題，暫且等社區(qū)豐富起來(lái)
  4. 定期有人維護(hù)的系統(tǒng)
  5. 對(duì)開(kāi)發(fā)有痛點(diǎn)而想要改進(jìn)：比如打包慢，冷啟動(dòng)慢，HMR 更新慢。。。。
  6. vite 生產(chǎn)環(huán)境用 rollup，但是改造成本大，提效不高，風(fēng)險(xiǎn)大，暫不建議使用?！颈救擞抟?jiàn)，大佬輕噴】

二.遷移步驟

將會(huì)以內(nèi)部系統(tǒng)作為案例改造, 開(kāi)發(fā)用 vite，生產(chǎn)依舊保持 webpack。

  1. 簡(jiǎn)單了解 vite 特性。有問(wèn)題優(yōu)先看vite 官網(wǎng)排查是否有更新或解決方案!!
  2. npm i vite@2.3.7 vite-plugin-vue2@1.6.2 vite-plugin-html@2.0.7 -D
  3. package.json 添加一個(gè) script -- "vite": "NODE_ENV=development vite"
  4. 關(guān)鍵在于配置 vite.config.js【默認(rèn)叫做這個(gè)文件名，你可配置成其他的。?！?/li>
 
 
 
 
    
  
  
  
  
  1. import { defineConfig } from 'vite'; 
    2.   
  
  
  
  2. import path from 'path'; 
    3.   
  
  
  
  3. import fs from 'fs'; 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. import { createVuePlugin } from 'vite-plugin-vue2'; 
    6.   
  
  
  
  6. import { injectHtml, minifyHtml } from 'vite-plugin-html'; 
    7.   
  
  
  
  7. import { cjs2esmVitePlugin } from 'cjs2esmodule' 
    8.   
  
  
  
  8. import dotenv from 'dotenv' 
    9.   
  
  
  
  9. const config = require('./config') 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. try { 
    12.   
  
  
  
  12.   // 根據(jù)環(huán)境變量加載環(huán)境變量文件 
    13.   
  
  
  
  13.   const file = dotenv.parse(fs.readFileSync(`./config/.env.${process.env.NODE_ENV}`), { 
    14.   
  
  
  
  14.     debug: true 
    15.   
  
  
  
  15.   }) 
    16.   
  
  
  
  16.   console.log(file) 
    17.   
  
  
  
  17.   // 根據(jù)獲取的 key 給對(duì)應(yīng)的環(huán)境變量賦值 
    18.   
  
  
  
  18.   for (const key in file) { 
    19.   
  
  
  
  19.     process.env[key] = file[key] 
    20.   
  
  
  
  20.   } 
    21.   
  
  
  
  21. } catch (e) { 
    22.   
  
  
  
  22.   console.error(e) 
    23.   
  
  
  
  23. } 
    24.   
  
  
  
  24. const API_LOCATION = process.env.API_LOCATION || '/api' 
    25.   
  
  
  
  25.  
    26.   
  
  
  
  26. function resolve(dir) { 
    27.   
  
  
  
  27.   return path.join(__dirname, './', dir) 
    28.   
  
  
  
  28. } 
    29.   
  
  
  
  29. export default defineConfig({ 
    30.   
  
  
  
  30.   root: './', // 項(xiàng)目根目錄（index.html 文件所在的位置）可以是一個(gè)絕對(duì)路徑，或者一個(gè)相對(duì)于該配置文件本身的相對(duì)路徑。 
    31.   
  
  
  
  31.   publicDir: 'public', // 作為靜態(tài)資源服務(wù)的文件夾.該值可以是文件系統(tǒng)的絕對(duì)路徑，也可以是相對(duì)于項(xiàng)目的根目錄的相對(duì)路徑。 
    32.   
  
  
  
  32.   base: './', // 公共基礎(chǔ)路徑。改值可以是絕對(duì)路徑或空字符串 
    33.   
  
  
  
  33.   mode: 'development', 
    34.   
  
  
  
  34.   optimizeDeps: { // 要預(yù)構(gòu)建的第三方依賴 
    35.   
  
  
  
  35.     include: [] 
    36.   
  
  
  
  36.   }, 
    37.   
  
  
  
  37.   resolve: { 
    38.   
  
  
  
  38.     alias: { 
    39.   
  
  
  
  39.       // 'vue': 'vue/dist/vue.esm.js', // 如果是模板解析的 - 使用這個(gè) vue：內(nèi)部為正則表達(dá)式  vue 結(jié)尾的 
    40.   
  
  
  
  40.       'vendor': resolve('src/vendor'), 
    41.   
  
  
  
  41.       '@': resolve('src'), 
    42.   
  
  
  
  42.       '~@': resolve('src'), 
    43.   
  
  
  
  43.       '~component': resolve('src/components'), 
    44.   
  
  
  
  44.       '~config': resolve('config'), 
    45.   
  
  
  
  45.     } 
    46.   
  
  
  
  46.   }, 
    47.   
  
  
  
  47.   plugins: [ 
    48.   
  
  
  
  48.     cjs2esmVitePlugin(), // 將 commonjs 轉(zhuǎn)化為 es module： 有報(bào)錯(cuò) 
    49.   
  
  
  
  49.     createVuePlugin({ 
    50.   
  
  
  
  50.       jsx: true, 
    51.   
  
  
  
  51.       jsxOptions: { 
    52.   
  
  
  
  52.         injectH: false, 
    53.   
  
  
  
  53.       }, 
    54.   
  
  
  
  54.     }), 
    55.   
  
  
  
  55.     minifyHtml(), // 壓縮 HTML 
    56.   
  
  
  
  56.     injectHtml({ // 入口文件 index.html 的模板注入 
    57.   
  
  
  
  57.       injectData: { // 模板注入的數(shù)據(jù) 
    58.   
  
  
  
  58.         htmlWebpackPlugin: { 
    59.   
  
  
  
  59.           options: { 
    60.   
  
  
  
  60.             isVite: true, 
    61.   
  
  
  
  61.             shotcut: '/static/img/favicon.png', 
    62.   
  
  
  
  62.           } 
    63.   
  
  
  
  63.         }, 
    64.   
  
  
  
  64.         title: 'HMO 運(yùn)營(yíng)后臺(tái)', 
    65.   
  
  
  
  65.       }, 
    66.   
  
  
  
  66.     }), 
    67.   
  
  
  
  67.   ], 
    68.   
  
  
  
  68.   define: { 
    69.   
  
  
  
  69.     'process.env': process.env 
    70.   
  
  
  
  70.   }, 
    71.   
  
  
  
  71.   server: { 
    72.   
  
  
  
  72.     host: 'liang.myweb.com', 
    73.   
  
  
  
  73.     open: true, // 是否自動(dòng)打開(kāi)瀏覽器 
    74.   
  
  
  
  74.     port: process.env.PORT || config.dev.port, 
    75.   
  
  
  
  75.     proxy: { 
    76.   
  
  
  
  76.       [API_LOCATION]: { 
    77.   
  
  
  
  77.         target: 'http://127.0.0.1:8001', 
    78.   
  
  
  
  78.         rewrite: (path) => path.replace(API_LOCATION, '') 
    79.   
  
  
  
  79.       } 
    80.   
  
  
  
  80.        
    81.   
  
  
  
  81.     } 
    82.   
  
  
  
  82.   }, 
    83.   
  
  
  
  83. }); 
    84.

三.常用問(wèn)題【踩坑日記】

1. vite 目前要求入口文件必須是根目錄下的 index.html，如果之前的 webpack 入口文件同名，需要更改。解決方案：vite.config.js:

 
 
 
 
    
  
  
  
  
  1. import { injectHtml } from 'vite-plugin-html'; 
    2.   
  
  
  
  2. export default defineConfig({ 
    3.   
  
  
  
  3.   plugins:[ 
    4.   
  
  
  
  4.     injectHtml({ // 入口文件 index.html 的模板注入 
    5.   
  
  
  
  5.       injectData: { // 模板注入的數(shù)據(jù) 
    6.   
  
  
  
  6.         htmlWebpackPlugin: { // 取和 webpack 插件同名的對(duì)象 key，即可 
    7.   
  
  
  
  7.           options: { 
    8.   
  
  
  
  8.             isVite: true, 
    9.   
  
  
  
  9.             shotcut: '/static/img/favicon.png', 
    10.   
  
  
  
  10.           } 
    11.   
  
  
  
  11.         }, 
    12.   
  
  
  
  12.         title: 'HMO 運(yùn)營(yíng)后臺(tái)' 
    13.   
  
  
  
  13.       }, 
    14.   
  
  
  
  14.     }) 
    15.   
  
  
  
  15.   ] 
    16.   
  
  
  
  16. }) 
    17.

webpack.xxx.js

 
 
 
 
    
  
  
  
  
  1. new HtmlWebpackPlugin({ 
    2.   
  
  
  
  2.   template: 'index.html', 
    3.   
  
  
  
  3.   inject: true, 
    4.   
  
  
  
  4.   isVite: false // 添加標(biāo)識(shí) 
    5.   
  
  
  
  5. }) 
    6.

根目錄入口文件 index.html - ejs 模板

 
 
 
 
    
  
  
  
  
  1. <% if (htmlWebpackPlugin.options.isVite) { %> 
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3.   <%}%> 
    4.

2. 新版本報(bào) xx 錯(cuò)：可切換舊版本，如 vite@2.2.3

3.沒(méi)有導(dǎo)出命名?

 
 
 
 
    
  
  
  
  
  1. Uncaught SyntaxError: The requested module '/config/index.js' does not provide an export named 'default'Uncaught SyntaxError: The requested module '/config/index.js' does not provide an export named 'default' 
    2.

錯(cuò)誤原因：瀏覽器僅支持 esm,不支持 cjs vite.config.js

 
 
 
 
    
  
  
  
  
  1. import { cjs2esmVitePlugin } from 'cjs2esmodule' 
    2.   
  
  
  
  2. export default defineConfig({ 
    3.   
  
  
  
  3.   plugins: [ 
    4.   
  
  
  
  4.    cjs2esmVitePlugin(), // 將 commonjs 轉(zhuǎn)化為 es module 
    5.   
  
  
  
  5.   ] 
    6.   
  
  
  
  6. }) 
    7.

如果有 require.xx 的按需加載寫法還可以修改成 import 的，案例如下：

 
 
 
 
    
  
  
  
  
  1. const subjectList = r => require.ensure( [], () => r(require('@/pages/xxx/subject/list.vue')), 'subject' ); 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. // 改為：Vue 動(dòng)態(tài)組件 component: ()=>import() 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. const subjectList = () => import(/* webpackChunkName: "subject" */ '@/pages/xxx/subject/list.vue') 
    6.   
  
  
  
  6. const arr = [ 
    7.   
  
  
  
  7.   { 
    8.   
  
  
  
  8.     path: '/subject/list', 
    9.   
  
  
  
  9.     name: 'subject/list', 
    10.   
  
  
  
  10.     component: subjectList 
    11.   
  
  
  
  11.     meta: {...} 
    12.   
  
  
  
  12.   } 
    13.   
  
  
  
  13. ]; 
    14.   
  
  
  
  14. export default arr; 
    15.

4. proxy 使用 http-proxy。完整選項(xiàng)詳見(jiàn) 此處.案例：

 
 
 
 
    
  
  
  
  
  1. proxy: { 
    2.   
  
  
  
  2.       '/rest': { 
    3.   
  
  
  
  3.         target: 'http://my.web.com/', 
    4.   
  
  
  
  4.         changeOrigin: true, 
    5.   
  
  
  
  5.         bypass: (req, res, proxyOption) => { 
    6.   
  
  
  
  6.           console.log(`當(dāng)前請(qǐng)求代理：${req.url} -> ${proxyOption.target}`); 
    7.   
  
  
  
  7.         }, 
    8.   
  
  
  
  8.       }, 
    9.   
  
  
  
  9.     } 
    10.

5. ts 文件報(bào)錯(cuò)?驗(yàn)證是否配置了 vite 的 ts 處理

 
 
 
 
    
  
  
  
  
  1. "compilerOptions": { 
    2.   
  
  
  
  2.   "types": ["vite/client"] 
    3.   
  
  
  
  3. } 
    4.

6. 全局環(huán)境變量報(bào)錯(cuò)?

 
 
 
 
    
  
  
  
  
  1. // const isProd = ENV === 'production'; // webpack - dev 環(huán)境變量 
    2.   
  
  
  
  2. // const isProd = import.meta.env.PROD; // vite - dev 環(huán)境變量 
    3.   
  
  
  
  3. // 可以避開(kāi)上面的，采用 NODE_ENV 來(lái)區(qū)分： 
    4.   
  
  
  
  4. const isProd = process.env.NODE_ENV === 'production'; 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. 那么我們啟動(dòng)的時(shí)候："dev": "NODE_ENV=development vite" 
    7.

或者可以探索一下社區(qū)的 babel 插件：babel-preset-vite【包含以下兩個(gè)功能】babel-plugin-transform-vite-meta-envbabel-plugin-transform-vite-meta-glob

7. 看一些打印出來(lái)的日志&錯(cuò)誤等?

cli --debug，或者 vite.config.js 配置打印相關(guān)參數(shù)

8. 引入文件，比如.vue 的時(shí)候，不可以省略擴(kuò)展名?

是的!!!不是他們不會(huì)做，是他們不想做，就是這么設(shè)計(jì)的，具體請(qǐng)戳這里, 尤大佬推特解釋然后加上 resolve.extensions: ['.vue'] 直接在控制臺(tái)報(bào)錯(cuò)：所以沒(méi)用。。。

 
 
 
 
    
  
  
  
  
  1. error: No loader is configured for ".vue" 
    2.

害!老老實(shí)實(shí)加上擴(kuò)展名!【在線】 方便的全局加上擴(kuò)展名方法如下：鏈接

9. less 文件找不到?

 
 
 
 
    
  
  
  
  
  1. [vite] Internal server error: '~@/styles/var.less' wasn't found. 
    2.

(1)確定已經(jīng)支持 less：npm install -D less(2)別忘了 resolve.alias 也加上一個(gè)：'~@': resolve('src')

10. 如何支持 jsx?

vite.config.js

 
 
 
 
    
  
  
  
  
  1. import { createVuePlugin } from 'vite-plugin-vue2'; 
    2.   
  
  
  
  2. createVuePlugin({ 
    3.   
  
  
  
  3.   jsx: true, // 配置 jsx 
    4.   
  
  
  
  4.   jsxOptions: { 
    5.   
  
  
  
  5.     injectH: false, 
    6.   
  
  
  
  6.   }, 
    7.   
  
  
  
  7. }) 
    8.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. Vue.component('my-component',{ 
    2.   
  
  
  
  2.  render () { 
    3.   
  
  
  
  3.    return (
    my template
    ) 
    4.   
  
  
  
  4.   } 
    5.   
  
  
  
  5. }) 
    6.

11. 根據(jù)環(huán)境變量配置代理?

(1)cross-env 來(lái)跨平臺(tái)設(shè)置環(huán)境變量

1. 安裝 cross-envnpm i cross-env -D

(2)加載環(huán)境變量文件。它能將環(huán)境變量中的變量從 .env 文件加載到 process.env 中

2. 安裝 dotenvnpm i dotenv -D

(3)config/.env.development 配置變量

 
 
 
 
    
  
  
  
  
  1. NODE_ENV = development 
    2.   
  
  
  
  2. API_LOCATION = /api 
    3.   
  
  
  
  3. LOGOUT_PC_LOCATION = http://user.myweb.com/login 
    4.   
  
  
  
  4. CRM_ADDRESS = http://crm.myweb.com 
    5.

(4)配置 vite.config.ts

 
 
 
 
    
  
  
  
  
  1. try { 
    2.   
  
  
  
  2.   // 根據(jù)環(huán)境變量加載環(huán)境變量文件 
    3.   
  
  
  
  3.   const file = dotenv.parse(fs.readFileSync(`./config/.env.${process.env.NODE_ENV}`), { 
    4.   
  
  
  
  4.     debug: true 
    5.   
  
  
  
  5.   }) 
    6.   
  
  
  
  6.   console.log(file) 
    7.   
  
  
  
  7.   // 根據(jù)獲取的 key 給對(duì)應(yīng)的環(huán)境變量賦值 
    8.   
  
  
  
  8.   for (const key in file) { 
    9.   
  
  
  
  9.     process.env[key] = file[key] 
    10.   
  
  
  
  10.   } 
    11.   
  
  
  
  11. } catch (e) { 
    12.   
  
  
  
  12.   console.error(e) 
    13.   
  
  
  
  13. } 
    14.   
  
  
  
  14. const API_LOCATION = process.env.API_LOCATION || '/api' 
    15.   
  
  
  
  15. ..... 此處省略 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. export default defineConfig({ 
    18.   
  
  
  
  18.   server: { 
    19.   
  
  
  
  19.     proxy: { 
    20.   
  
  
  
  20.       [API_LOCATION]: { 
    21.   
  
  
  
  21.         target: 'http://127.0.0.1:8001', 
    22.   
  
  
  
  22.         rewrite: (path) => path.replace(API_LOCATION, '') // 根據(jù)環(huán)境變量配置代理 
    23.   
  
  
  
  23.       } 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25.     } 
    26.   
  
  
  
  26.   } 
    27.   
  
  
  
  27. }) 
    28.

(5)package.json 啟動(dòng) script

 
 
 
 
    
  
  
  
  
  1. "vite": "cross-env NODE_ENV=development vite" 
    2.

12. 環(huán)境變量報(bào)錯(cuò)?

原來(lái) webpack 使用的環(huán)境變量 process.env，vite 沒(méi)有這個(gè)，所以報(bào)錯(cuò)

 
 
 
 
    
  
  
  
  
  1. Uncaught ReferenceError: process is not defined 
    2.

vite 使用的時(shí)候import.meta.env, 但是我們老的代碼不想動(dòng)怎么辦?其實(shí) vite 也還是留了口子給我們定義全局變量[類型不能是 function]

 
 
 
 
    
  
  
  
  
  1. export default defineConfig({ 
    2.   
  
  
  
  2.   // ... 
    3.   
  
  
  
  3.   define: { 
    4.   
  
  
  
  4.     'process.env': {} 
    5.   
  
  
  
  5.   } 
    6.   
  
  
  
  6. }) 
    7.

13. anything else?

..... bug 無(wú)止境，很多都是非通用問(wèn)題，都是引入 vite 后發(fā)現(xiàn)的系統(tǒng)本身的一些問(wèn)題，這里就不一一舉例了。后續(xù)會(huì)追蹤更多通用問(wèn)題


網(wǎng)頁(yè)名稱：Vue2系統(tǒng)如何快速遷移Vite作為開(kāi)發(fā)工具
網(wǎng)站地址：http://m.5511xx.com/article/dpodjhh.html