vue H5 axios 读取文件

转载

jojo 2024-10-25 09:27:51

文章标签 vue H5 axios 读取文件前端 web vue web前端 文章分类 iOS 移动开发

前言

关于vue的运行与打包，需要做一些路径和路由模块的配置。本地运行使用了绝对路径，而打包上线的路径则为相对路径；在vue.config.js文件中找到publicPath属性修改值即可。路由模式可以在router文件夹下的index.js中修改，修改字段mode值即可；路由模式有三种，分别是hash、history和abstract。如果不设置自动匹配参数功能，那么就需要在启动或打包项目时通过手动方式修改这两个文件。

vue.config.js文件(路由文件)

// 引入文件读写模块
let fs = require("fs"),
	// 引入文件路径模块
	path = require('path'),
	// 配置默认(本地)路径与打包路径
	// 配置默认(本地)路由模式与打包路由模式
	// 这里需要一一对应
	pathMode = {
		serve: ['/', 'history'],
		build: ['./', 'hash']
	},
	// 辨别npm指令
	// 执行npm时读取package.json文件对应的指令值内容
	PENLE = process.env.npm_lifecycle_event,
	// 读取路由文件
	routerObj = path.join(__dirname, './src/router/index.js'),
	// 把路由文件转化为字符串
	routerFile = fs.readFileSync(routerObj).toString();

// 替换对应路由模式值
routerFile = routerFile.replace(/history|hash|abstract/ig, `${pathMode[PENLE][1]}`);

// 写入处理后的路由文件
fs.writeFileSync(routerObj, routerFile);

module.exports = {
	transpileDependencies: true,
	publicPath: pathMode[PENLE][0],
	chainWebpack: config => {
		config.plugin('html').tap(args => {
			// 动态修改网页标题
			// 这里设置的总网页标题
			// 也可以通过其他方法动态设置路由的网页标题
			args[0].title = '修改网页标题';
			
			return args;
		});
	}
};

代码解读

第一步
引入fs和path两个模块，fs模块负责读写文件值，JavaScript自带功能。path模块补全文件路径，JavaScript自带功能。
第二步
定义pathMode对象来保存相关参数，serve属性存放项目运行时所需的参数，build属性存放项目打包时所需的参数；两个参数以数组的形式存储数据，数组第一项存放路径值，第二项存放路由模式值。这里的serve和build从package.json文件的scripts字段中获取，当运行npm run serve或yarn build时vue就会到package.json文件中寻找对应的执行指令来工作。得到指令后就会执行vue.config.js文件，从而启动或打包项目。
第三步
定义PENLE变量保存获取到的指令字符串值，通过得到的指令值匹配pathMode对象来获取对应参数，也就是根据指令值获取pathMode对象中对应的参数值。process参数是vue自带属性，是vue固有属性，类似1 + 1 = 2，记住用法即可。此方式不是唯一的获取运行指令值方式，还有其他获取的方式。此方式有弊端，当运行的启动或打包指令是复杂指令时，此方法就有可能失效或不能正确获取指令值。另一种比较完整获取指令值的方法process.argv，至于最终获得的值是什么，就需要看package.json文件中指令配置的写法了。
第四步
使用path模块读取文件路径放到routerObj变量中待用，得到的路径值包括盘符，也就是获取到根路径。
第五步
使用fs文件模块读取文件值并转为字符串。读取的文件值是一种流的形式，所以需要使用toString方法转为字符串才可操作。
第六步
使用正则来替换路由文件中的路由模式值。
第七步
把替换后的路由文件内容重新写到路由文件中。
第八步
设置publicPath路径。
总结
核心思想就是获取npm的指令类型值，用类型值做key获取对应的参数，相当于通过key获取对象中的值。使用文件模块和路径模块来修改路由文件中的值，让其配置与路由模式相对应。如果参数不对应，那么会出现问题，本地启动会报错，打包后的项目在浏览器中打开时，页面不显示，也不报错。

router文件夹下的index文件

import Vue from 'vue';
import VueRouter from 'vue-router';
import IndexView from '@/views/indexView.vue';

Vue.use(VueRouter);

const routes = [...];

const router = new VueRouter({
    mode: 'hash',
    base: process.env.BASE_URL,
    routes
});

export default router;

代码解读

路由文件只需关注mode字段即可，在vue.config.js文件中主要处理的就是这个字段。正则匹配使用或运算形式，/history|hash|abstract/ig，目前路由模式只有三种，属于固定值。当运行npm run serve时使用的就是history，当运行yarn build时使用hash；如果第一次运行是npm run serve，第二次运行还是npm run serve，这种情况也会执行替换操作，这是一种浪费，但是当前版本没做这种限制。本人认为这种设置参数的方式不是很好，因一个属性而读取整个文件，又重写了整个文件，总感觉会多耗费一些启动时间。