vue2轉vue3 vite配置問題匯集（js)

 

1.webpack require.context 對應 vite寫法

https://blog.csdn.net/weixin_43857376/article/details/114687031

 webpack寫法

vite配置

 

2.Vite啟動后提示“Network: use `--host` to expose“，且無法通過網絡IP訪問服務

 

 https://blog.csdn.net/qq_41664096/article/details/118961381

 

 

 

配置第一種

運行成功

 

 

 3.樣式scss報錯

 

 

 官網https://sass-lang.com/documentation/breaking-changes/slash-div

 執行項目2個命令（不要着急 下面還有方案2，如果是新項目或者全局樣式不多，考慮方案2🙃）

$ npm install -g sass-migrator $ sass-migrator division **/*.scss

 

（sass-migrator division **/*.scss可進入node_modules執行）

再次啟動

     

 (后來配置ts項目時，按照上面配置還是有錯誤警告，不過不影響打包和使用，因此繼續找了其他方案）

再次記一下第二種解決方法

報錯原因是 / 在新版本中被廢除了

替換解決方案（我是基於第一種方案上修改，直接嘗試第二種成功的告訴一下我 😇）

@use "sass:math"; // 在頂部引入


原來寫法
@function px2rem($px) { @return $px / ($design_width / 10) * 1rem; }

新寫法
@function px2rem($px) { @return math.div($px, math.div($design_width, 10)) * 1rem; }

變化是  a/b ==> math.div(a,b)

 

 

4.使用vite build之后 本地dist文件index打不開

 或者在vsconde 安裝

            

 

1.直接打開

　　　　

 

 2.手動點擊右下角切換也行

          

 

另外，當你配置

server: {

    host: '0.0.0.0'

  }

打包后的服務器也是3000端口

重新配置dev運行環境端口區分

 

難道就不能本地打開了嗎，只能在線服務器

No

（背景：遇到后台部署的方式就是必須要本地打開才成功的情況😥 根本原因就是靜態資源讀取路徑問題😥，不過測試了好幾種方案，解決很簡單。中間還要被谷歌坑了，最好本地打開用火狐去測吧）

vite.config 里面配置 

base: './' 

公共基礎路徑 靜態資源處理

 然后就可以本地打開了，部署也沒問題

官網

    

 

 

5.vue3+vite2 項目體驗

https://blog.csdn.net/weixin_43487782/article/details/112759198

 

6.環境變量和模式

 vite官網https://cn.vitejs.dev/guide/env-and-mode.html

熟悉的process.env.xxx 不再適用

 6.1.配置開發環境文件

main.js 引用打印

 const ENV = import.meta.env
console.log(999, ENV)

 run dev 

 

 

自定義的的變量是VITE_開頭即可

6.2配置打包環境

 

 效果

 

 6.3 配置其他模式

 

 

 

7.Vite自動化注冊全局組件

 

 官網https://cn.vuejs.org/v2/guide/components-registration.html

組件放到common文件里

配置文件config.js

// 自動注冊全局組件
// vue2 webpack寫法
const requireComponent = require.context('../../../components/common', false, /\.vue$/)
const install = (Vue) => {
  requireComponent.keys().forEach((fileName) => {
    let config = requireComponent(fileName)
    let componentName = fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    Vue.component(componentName.replace(/\//, '-'), config.default || config)
  })
}

export default {
  install
}

// vue3 vite寫法
import { defineAsyncComponent } from 'vue'
const requireComponent = import.meta.glob('../../../components/common/*.vue')
// console.log(requireComponent)
const install = (Vue) => {
  for (const key in requireComponent) {
    // console.log(1, key)
    if (Object.prototype.hasOwnProperty.call(requireComponent, key)) {
       // 獲取和目錄深度無關的文件名
      let componentName = key
      .split('/')
      .pop()
      .replace(/\.\w+$/, '')
      // console.log(910,componentName)
      let config = requireComponent[key]
      Vue.component(componentName, defineAsyncComponent(config))
    }
  }
}
export default {
  install
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

let app = createApp(App)

import common from '@/assets/js/core/config' // 引入配置文件

 // 自動把components/common文件夾的公共組件注冊到全局，可以在各個頁面使用，不用再單獨引入
 app.use(common)

本地是以以前項目框架來調整，測試已成功

 

 

8.vite打包配置(靜態資源合並打包/清除log/gzip壓縮/ENV配置等)

參考一下文章

https://blog.csdn.net/shinjie1210/article/details/122473024

 

以上都是針對js語言配置，ts語言還沒從測試，后續補充到新篇章