Vue2老项目中使用vite升级

1、安装依赖：

使用npm:

npm install vite -D
npm install @vue/compiler-sfc -D
npm install vite-plugin-vue2 -D

// 或

npm install vite @vue/compiler-sfc vite-plugin-vue2 -D

使用yarn :

yarn add vite -D
yarn add @vue/compiler-sfc -D
yarn add vite-plugin-vue2 -D

// 或

yarn add vite @vue/compiler-sfc vite-plugin-vue2 -D

2、项目根目录新建vite.config.js并修改；

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
import {resolve} from 'path'

function pathResolve(dir) {
  return resolve(process.cwd(), '.', dir)
}
// vite.config.js
export default defineConfig({
  server: {
    host: '0.0.0.0',
  },
  plugins: [
    createVuePlugin({
      vueTemplateOptions: {}
    }),
  ],
  resolve: {
    extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    alias: {
      // vue2项目别名一般都是@，vue3中一般使用/@/, 为方便使用
      '@': resolve('src')
    }
  }
})

3、将index.html放在根目录，并调整main.js文件的路径；

<script type="module" src="/src/main.js"></script>

 4、注意：

 如果是如上结构请修改为：

 template: '<App/>'

 // 替换成

 render: h => h(App)
 

5、修改package.json:找到“script”，新增如下代码：

"vite": "vite",

如图：

 6、最后就可以使用  npm run vite 或 yarn vite 启动项目了；启动后项目默认端口是3000；