vue2中，操作流程实例版之使用vite-Web开发构建工具 & baseURL基准地址-直接赋值和间接赋值

时间：2025-04-07 22:16:18

vue2中，操作流程实例版之使用vite-Web开发构建工具 & baseURL基准地址-直接赋值和间接赋值

1、基本介绍

Vite是Vue的作者尤雨溪开发的Web开发构建工具。除了Vite外，前端著名的构建工具还有Webpack和Gulp。和Vue3可以完美结合。

它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，基于浏览器支持 dynamic import去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用，使得启动速度快得惊人，同时支持任意类型文件的解析（提供解析loder即可）。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。

2021年前端有什么新的的变化就是 “会有很多人抛弃webpack开始使用 vite”。

2、操作流程-实例
2.1、vite vue 的安装
yarn add vite vue
2.2 启动命令

//基础版
"scripts": {
  "dev": "vite",
  "build": "vite build"
},
// 实例参考版   
"scripts": {
   "serve": "vite",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

vite命令会去找到根目录下的 ，跟 webpack是类似的流程。

2.3、

在 中，需要添加支持 的插件。

简略版

yarn add vite-plugin-vue2 --dev   

//   
import { createVuePlugin } from "vite-plugin-vue2";   
export default {  plugins: [createVuePlugin(/*options*/)]  }  

// 这里的 options 可配置 vueTemplateOptions， jsx  
// 详情查看 /underfin/vite-plugin-vue2

实例版

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

export default defineConfig({
	plugins: [
		createVuePlugin(),
	],
	resolve: {
		alias: [
			{
				find: '@',
				replacement: '/src',
			},
		],
	},
	server: {
		host: '0.0.0.0',
		port: 8080
	},
	css: {
		preprocessorOptions: {
			less: {
				javascriptEnabled: true,
			}
		},
	}
});

这里可配置大量的option,跟 webpack 有些类似，比如 root，默认为 ()， 所以，vite 获取根目录下找 ，更多配置可到 /config/#conditional-config 查看。

2.4、调整目录结构，官方说明

public迁移至——>src同层级


/public -> 根目录下，与同级

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->  
  <script src="./src/" type="module"></script>
</body>

中自然是 vue2 的主入口了，这里需要特别主要的是，我们平时使用 webpack 的时候会省略文件的后缀名，但 vite 暂不能省略（或许有办法可以配置，但暂时没看到）。

2.5、router文件修改base
const router = new VueRouter({
  mode: "history",
  // base: .BASE_URL,
  base: import.meta.env.BASE_URL,
  routes,
});
2.6、修改serve命令
"scripts": {
   "serve": "vite",
   "build": "vite build",
   "lint": "vue-cli-service lint"
},

npm i大功告成，执行命令

npm run serve

附录-基准地址
1.0、直接赋值地址

1、src/api/

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: App.apiConfig.service,
  timeout: 30000, // 请求超时时间
  headers: { 'Content-Type': 'application/json;charset=UTF-8' }
});

2、src同层级，static/

/*
 * @Author: your name
 * @Date: 2022-03-30 11:00:16
 * @LastEditTime:  2022-03-30 17:10:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /demo根目录/static/
 */
/**
 * App全局命名空间
 * @type {Object}
 */
const App = {};

// api服务url
App.apiConfig = {
  service: '',
};

3、迁移至根目录下的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="renderer" content="webkit"> <!--双核浏览器默认采用webkit内核 -->
    <title>项目题目-demo</title>

    <script src="./static/"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
2.0、间接赋值地址

1、src/api/

import axios from 'axios';

/**
 * baseURL配置
 * @param service { string } service名称
 * @return {*}
 */
function serviceConfig (service) {
  return {
    baseURL: App.apiConfig[service],
    timeout: 60000, // 请求超时时间
    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
  }
}

// 项目 服务
const service = axios.create(serviceConfig('service'));

2、src同层级，public/static/

/*
 * @Author: zhupengfei6623
 * @Date: 2020-06-05 16:05:40
 * @Description: file content
 */
/**
 * App全局命名空间
 * @type {Object}
 */
const App = {};

// api服务url
App.apiConfig = {
  service: '',
};

3、迁移至根目录下的

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="bitbug_favicon.ico">
    <title>EditorLite</title>
    <link href="/static/naviMap/" rel="stylesheet" type="text/css" />
    <link href="/mapbox-gl-js/v1.2.0/" rel='stylesheet' />
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%=  %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="/static/"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

相关文章