基于vite2.x搭建vue2.x项目 - 网站源码_资源分享

1、调用工程项目

（1）、关上指示行终端产品，继续执行指示：npm -v。npm为6.x版

终端产品继续执行：npm init vite 工程项目产品目录名 –template vanilla

npm为7.x版

终端产品继续执行：npm init vite 工程项目产品目录名 — –template vanilla

特别注意：现阶段采用vite版为2.x假如npm指示不存有，请先加装node，离线门牌号：http://nodejs.cn/download/ （2）、cd 工程项目产品目录名（3）、npm i

2、加装倚赖包/插件

（1）、包：[email protected]，vue2最低版，制造倚赖。透过终端产品输出：npm view vue versions 指示查阅，门牌号：https://cn.vuejs.org/v2/guide/（2）、包：[email protected]，vue-router3最低版，相容vue2.x，制造倚赖。透过终端产品输出：npm view vue-router versions 指示查阅，门牌号：https://v3.router.vuejs.org/zh/installation.html（3）、包：[email protected]，vuex3最低版，相容vue2.x，制造倚赖。透过终端产品输出：npm view vuex versions 指示查阅，门牌号：https://v3.vuex.vuejs.org/zh/（4）、UI包：element-ui，相容vue2.x，制造倚赖。透过终端产品输出：npm view element-ui versions 指示查阅，门牌号：https://element.eleme.cn/#/zh-CN/component/installation（5）、工具包：dayjs，比 moment 轻量n级的日期格式库，制造倚赖，门牌号：https://dayjs.fenxianglu.cn/category/（6）、包：whatwg-fetch，相容旧版浏览器IE10+，制造倚赖，门牌号：https://github.com/github/fetch（6）、插件：vite-plugin-vue2，提供 vue2.x 单文件组件支持的插件，开发倚赖，门牌号：https://www.npmjs.com/package/vite-plugin-vue2（7）、插件：@vitejs/plugin-legacy，打包出相容传统浏览器的代码，开发倚赖，门牌号：https://github.com/vitejs/vite/tree/main/packages/plugin-legacy（8）、插件：unplugin-vue-components，按需导入组件，开发倚赖，门牌号：https://github.com/antfu/unplugin-vue-components（9）、插件：vite-plugin-pages，自动生成路由列表，开发倚赖，门牌号：https://www.npmjs.com/package/vite-plugin-pages（10）、包：@vue/compiler-sfc，编译 vue2.x | vue3.x 单文件组件，开发倚赖，自动生成路由在配置meta时，需要倚赖次包，门牌号：https://www.npmjs.com/package/@vue/compiler-sfc（11）、包：[email protected]，将 vue2.x 模板预编译为渲染函数，版跟vue2.x版保持一致，vite-plugin-vue2 插件倚赖次包，开发倚赖，门牌号：https://www.npmjs.com/package/vue-template-compiler（12）、插件：vite-plugin-html，(HTML 压缩能力，EJS 模板能力，多页应用支持，支持自定义输出，支持自定义模板)，开发倚赖，门牌号：https://github.com/vbenjs/vite-plugin-html（13）、包：sass， CSS预处理器，开发倚赖，门牌号：https://www.sass.hk/制造倚赖加装指示：

npm i [email protected] [email protected] [email protected] element-ui dayjs whatwg-fetch

开发倚赖加装指示：

npm i vite-plugin-vue2 @vitejs/plugin-legacy unplugin-vue-components vite-plugin-pages @vue/compiler-sfc [email protected] vite-plugin-html sass -D

3、配置vite

（1）、在工程项目的根产品目录下新建vite.config.js 文件，代码如下：

import { defineConfig } from vite import path from path import {createVuePlugin} from vite-plugin-vue2 import legacyPlugin from @vitejs/plugin-legacy //按需导入组件 start import Components from unplugin-vue-components/vite import { ElementUiResolver } from unplugin-vue-components/resolvers //按需导入组件 end import Pages from “vite-plugin-pages” // 定义index.html文件 import { createHtmlPlugin } from vite-plugin-html const resolve = dir => path.resolve(__dirname,dir) export default defineConfig(({command,mode}) => { // 开发环境 mode = development command = serve // 制造环境 mode = production command = build return { plugins: [ //提供 vue2.x 单文件组件支持的插件 createVuePlugin(), //打包出相容传统浏览器的代码 legacyPlugin({ targets: [> 1%, last 2 version, ie >= 11], additionalLegacyPolyfills: [regenerator-runtime/runtime] }), //按需导入组件 Components({ //在此列表中的组件也会按需自动导入和注册 dirs: [./src/components], //此UI库的组件也会自动导入和注册（element-ui对应ElementUiResolver，Naive UI对应NaiveUiResolver，vant对应VantResolver，iview对应ViewUiResolver等等） // 配置之后，无需在 main.js 引入 element-ui 了,想要采用element-ui 哪个组件，可直接在 template 中引入 resolvers: [ElementUiResolver()] }), //自动生成路由列表配置，假如需要配置 name 和 meta 信息，可以在单文件组件中顶部写入 <route>{name:,meta:{}}</route> 进行配置 Pages({ // 自动生成的对应产品目录，默认就是src/pages，所以这样可以不设置，除非需要采用别的路径 dirs: [src/pages], // 是否动态导入组件 importMode: path => path.includes(“_async”) ? “async” : “sync” }), // 定义index.html createHtmlPlugin({ //是否压缩html minify:true, // 注入index.html的数据，ejs格式 inject:{ data:{ title:我是标题, mode:mode, injectScript:`<script></script>` } } }) ], //静态资源路径改为相对路径，默认是绝对路径/ base: “./”, server: { //自动关上浏览器 open: true, //正常显示现阶段局域网IP访问门牌号，假如没有配置此项，继续执行npm run dev后，会在终端产品显示：Network: use `–host` to expose host: “0.0.0.0”, // api 代理 proxy:{ /api:{// 将’/api‘请求转到代理请求’http://192.168.3.136:8080/api‘ target:”http://192.168.3.136:8080″, changeOrigin:true, secure:false, //假如不想/api被传递，需要重写路径 /api -> http://192.168.3.136:8080 rewrite: path => path.replace(/^\/api/, ) } } }, resolve: { // 导入文件时，可以省略文件的后缀，默认支持js后缀，不支持vue后缀。下面配置导入文件时可省略的后缀，此配置是覆盖，非合并 extensions: [.vue, .js, .json], // 配置路径别名 alias:{ @:resolve(src) } } } })

4、创建、修改、删除相关的文件和文件夹

（1）、在工程项目的根产品目录下创建 src 产品目录，在 src 产品目录下面创建 pages、components、router、store、api、utils、assets 等产品目录（可根据自己需求创建）根产品目录终端产品继续执行指示：

md src

然后

cd src

最后

md pages & md components & md router & md store & md api & md utils & md assets

（2）、删除工程项目根产品目录下的 style.css。在根产品目录终端产品继续执行指示:

del style.css

（3）、在工程项目的根产品目录下创建 public 产品目录，放置不需要编译的静态资源。根产品目录终端产品继续执行指示：

md public

（4）、修改项目根产品目录下index.html 文件，代码如下：

<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> <link rel=”icon” type=”image/svg+xml” href=”/favicon.svg” /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> <title><%- title %></title> <%- injectScript %> <% if (mode !== development) { %> <script></script> <% } %> </head> <body> <div id=”app”></div> <script type=”module” src=”/src/main.js”></script> </body> </html>

（5）、在 src 产品目录下，创建 App.vue 文件，作为根组件。终端产品进入 src 产品目录，之后继续执行：

cd. > App.vue

（6）、将工程项目的根产品目录下的main.js放置src产品目录下，并修改 main.js 文件，代码如下：

// fetch方法相容IE10+，相容Safari6.1+，相容Edge、Chrome、Firefox // IE浏览器出现“XMLHttpRequest: 网络错误 0x80070005, 拒绝访问” 解决办法：https://blog.csdn.net/bozhu1/article/details/118567244 import whatwg-fetch import Vue from vue // 导入绑在vue原型上的插件 import ./utils/plugin import App from ./App.vue import router from “./router”; import store from ./store new Vue({ router, store, render: h => h(App) }).$mount(“#app”)

（7）、在 utils 产品目录下新建 plugin.js 文件，代码如下：

import Vue from vue import Loading from element-ui/lib/loading import MessageBox from element-ui/lib/message-box import Notification from element-ui/lib/notification import Message from element-ui/lib/message import element-ui/lib/theme-chalk/index.css import dayjs from dayjs Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message; Vue.prototype.$date = dayjs;

（8）、在router 产品目录下新建index.js 文件，代码如下：

import Vue from vue import VueRouter from vue-router import routes from “~pages”; Vue.use(VueRouter) const router = new VueRouter({routes}) export default router

（9）、在 store 产品目录下新建index.js 文件，代码如下：

import Vue from vue import Vuex from vuex Vue.use(Vuex) export default new Vuex.Store({ state:{ count:0 }, getters:{ }, mutations:{ add(state,val){ state.count++ } }, actions:{ } })

5、运行工程项目

（1）、终端产品指示行继续执行：

npm run dev

6、打包工程项目、预览打包的工程项目

（1）、终端产品指示继续执行：

npm run build

（2）、终端产品指示继续执行：

npm run preview

7、vite全局环境变量

内置全局变量

1、import.meta.env.MODE：运行模式，透过–mode来设置 2、import.meta.env.BASE_URL：部署的公共基础路径，由config文件中的base确定 3、import.meta.env.PROD：boolean值，是否运行在制造环境 4、import.meta.env.DEV：boolean值，是否运行在开发环境(永远与import.meta.env.PROD相反)