定制小程序开发费用普遍的需求，定制小程序开发费用却很少有现成的答案。
一、定制小程序开发费用需求及思路
定制小程序开发费用我相信这是普遍的需求。即，在配置文件里定义系统名称、版权人、建设方或者技术支持等信息。一个前端项目，至少有3个地方会用到系统名称：登录页，登录后页面的页头，以及每个页面的title。直接写在页面里，当然没有什么大问题，但修改繁琐，且容易出现不一致的情况。
对于来说，咋弄？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/下，算是静态资源，发布时不经过，因此部署之后，仍然可以修改，真正起到配置的作用。
二、配置文件
/public/config/index.js
exports.app = { name: "订餐谁拿饭抓阄系统", owner: "一群饭桶", developer: "蓬蓬养猪场",};- 1
- 2
- 3
- 4
- 5
注意写法。为啥不象一般的vue组件那样写成下面这样子呢？
export default = {}或者export const app = {}- 1
- 2
- 3
原因是在静态资源里这样写，运行会报错，说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; }); },。。。};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
是个什么对象？我目前也还不知道。
vue.config.js为/public/index.html提供配置，除了上述方式，还有另外一种，见
第二种方式主要是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 }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
参考文章