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语言还没从测试，后续补充到新篇章