一、需求及思路
我相信这是普遍的需求。即，在配置文件里定义系统名称、版权人、建设方或者技术支持等信息。一个前端项目，至少有3个地方会用到系统名称：登录页，登录后页面的页头，以及每个页面的title。直接写在页面里，当然没有什么大问题，但修改繁琐，且容易出现不一致的情况。

对于VUE项目来说，咋弄？vue页面无须多言，假如存在一个配置文件，直接读取配置文件就好了。而对于项目唯一的页面/public/index.html怎么办？这是一个静态页面。

我查了许久，然后按这样的思路捣鼓：
1、建立一个配置文件public/config/index.js
2、vue.config.js中读取这个配置文件，用于/public/index.html
3、vue页面也直接读取这个配置文件

二、配置文件

/public/config/index.js

exports.app = {
  name: "订餐谁拿饭抓阄系统",
  owner: "一群饭桶",
  developer: "蓬蓬养猪场",
};

三、vue.config.js读取配置文件及public/index.html使用配置

1、在vue.config.js里面，首先读出配置，然后在chainWebpack里写入该配置项。

const appConfig = require("./public/config");

module.exports = {
  。。。
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = appConfig.app.name;
      return args;
    });
  },
。。。
};

2、/public/index.html
title使用配置

<!DOCTYPE html>
<html>
  <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" />
    <title><%= htmlWebpackPlugin.options.title %></title>

四、vue页面读取配置文件

import appConfig from "/public/config";

export default{
	data(){
		appName: appConfig.app.name
	}
}

# vue.js # 前端 # javascript
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