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 启动命令

package.json

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

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

2.3、vite.config.js

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

vite.config.js简略版

yarn add vite-plugin-vue2 --dev   

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

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

vite.config.js实例版

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，默认为 process.cwd()， 所以，vite 获取根目录下找 index.html，更多配置可到 https://vitejs.dev/config/#conditional-config 查看。

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

public迁移至——>src同层级

index.html

index.html
/public -> 根目录下，与package.json同级

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

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

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

npm i大功告成，执行命令

npm run serve

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

1、src/api/request.js

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/apiConfig.js

/*
 * @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/apiConfig.js
 */
/**
 * App全局命名空间
 * @type {Object}
 */
const App = {};

// api服务url
App.apiConfig = {
  service: 'http://cmp-gateway-sp9-port.ayiqdpfs.cloud.app.ncloud.navinfo.com',
};

3、迁移至根目录下的index.html

<!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/apiConfig.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
2.0、间接赋值地址

1、src/api/request.js

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/apiConfig.js

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

// api服务url
App.apiConfig = {
  service: 'http://cmp-gateway-sp9-port.ayiqdpfs.cloud.app.ncloud.navinfo.com',
};

3、迁移至根目录下的index.html

<!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/navi-map.css" rel="stylesheet" type="text/css" />
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css" rel='stylesheet' />
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="/static/apiConfig.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>
# webpack # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue