vue项目读取全局配置

Posted 左直拳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目读取全局配置相关的知识,希望对你有一定的参考价值。

普遍的需求,却很少有现成的答案。

一、需求及思路

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

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

我查了许久,然后按这样的思路捣鼓:

1、建立一个配置文件public/config/index.js
2、vue.config.js中读取这个配置文件,用于/public/index.html
3、vue页面也直接读取这个配置文件

按照很自然的想法,就是在vue.config.js里定义这些配置。但是,vue.config.js这个文件,其配置主要是供系统读取,决定系统的一些行为,而不是我们上面说的系统信息类的配置。因此,最好是将二者分开(当然不分开,应该也可以用),独立设置一个系统信息配置文件。另外,该配置文件将放在public/config/下,算是静态资源,发布时不经过webpack,因此部署之后,仍然可以修改,真正起到配置的作用。

二、配置文件

/public/config/index.js

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

注意写法。为啥不象一般的vue组件那样写成下面这样子呢?

export default = 
或者
export const app = 

原因是在静态资源里这样写,运行会报错,说Unexpected token ‘export’。为啥会这样,我目前还掰扯不清。参考文章:
export报错SyntaxError: Unexpected token export

三、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>

htmlWebpackPlugin是个什么对象?我目前也还不知道。

vue.config.js为/public/index.html提供配置,除了上述方式,还有另外一种,见
vue项目中index.html文件中使用.env.production和.env.development中的常量值

第二种方式主要是vue.config.js自己定义了一个配置项,然后在/public/index.html里读取。问题是,定义和使用的名称不一样。定义时,是configureWebpack.name,但使用时,是<title><%= webpackConfig.name %></title>。真不知怎么搞的。

四、vue页面读取配置文件

这个就轻车熟路了。

import appConfig from "/public/config";

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

参考文章
vue中使用public文件夹下资源地址应该怎么写?

以上是关于vue项目读取全局配置的主要内容,如果未能解决你的问题,请参考以下文章

vue.config.js 中配置全局 scss

vue项目部署,网关服务配置文件修改

electron-vue 项目启动动态获取配置文件中的后端服务地址

在 Vue js 中全局读取配置,如 Mixins

webpack+vue打包之后输出配置文件修改接口文件

vue项目对axios的全局配置