vue2+vite环境搭建

最新推荐文章于 2026-04-09 08:22:42 发布

原创最新推荐文章于 2026-04-09 08:22:42 发布 · 2.9k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

Blue_Arc

关注

标签

#vue.js #javascript #前端

分类前端开发

本文介绍了如何使用vite搭建Vue2项目，包括项目初始化、模块依赖安装、文件改动以及静态文件打包。在项目初始化阶段，需要删除vue3依赖并安装vite-plugin-vue2。接着，详细说明了vite.config.js、main.js、index.html、App.vue以及Router的修改。最后，讨论了静态文件打包后在Flask服务器上的部署，以及对index.html的相应调整。

Vue2

Vue2为开发主流，而vite为新一代打包工具，采用vue2 + vite构建

项目初始化

npm create vite@latest

此时会提示你安装最新的vite，技术栈选择vue，会默认下载最新版vue3

输入项目名称，例如demo，会自动生成相应名称文件夹

cd demo
npm i

删除原有的vue3依赖

npm uninstall @vitejs/plugin-vue -D

安装vite-plugin-vue2依赖

npm i vite-plugin-vue2 -D

修改vue版本由3改为2版本

npm i vue@2 -S

模块依赖安装

npm i qs
npm i axios
npm i vue-router@3.5.2 //与vue2兼容
npm i element-ui

文件改动

vite.config.js

import { defineConfig } from 'vite'
import { createVuePlugin } from "vite-plugin-vue2";

export default defineConfig({
  plugins: [
    createVuePlugin()
  ],
  resolve: {
    /* 添加alias规则 */
    alias: [
      {
        find: '@/',
        replacement: '/src/'
      }
    ],
    /* 暂时先加.vue, .js, .json */
    extensions: [".vue", ".js", ".json"],
  },
  return:{
    base:'/'
  },
  build: {
    rollupOptions: {
      output: { //静态资源分类打包
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        }
      }
  }
})

main.js

import Vue from 'vue'
import App from './App'
import qs from 'qs'
import axios from 'axios'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.prototype.$axios = axios //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs //全局注册，使用方法为:this.qs
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
html, body, #app {
  height: 100%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #000102;
}

</style>

Router

src下新建router文件夹，新建index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
    ]
})

静态文件打包

npm run build

打包文件后若放在服务器中运行，例如Flask

将一些ico网站图标加入static文件夹中
修改index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/static/nlogo.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>

    <link rel="stylesheet" href="/static/css/index-2e70103c.css">
  </head>
  <body>
    <div id="app"></div>
    <script crossorigin src="/static/js/index-2d27bd93.js"></script>
  </body>
</html>