① Vue-cli-4-路由配置文件，路由进阶，二级路由
vue.config.js 是vue的配置文件，必须创建在 demo根目录 下，该配置文件中，只能使用commonjs模块化语法，使用mole.export导出，格式如下图。
@符号代表src资源目录，在vue.config.js文件中将路径解析，path.resolve是拼接路径方法。将@c定义为当前绝对路径
@c代表src目录下的components文件，@v代表src目录下的views文件，其他同理，后续在其他文件中引入文件时，只需要使用以下方法即可导入，不会随着文件目录的改变而改变。
1.路由模式
2.路由元信息
meta属性，配置路由的元信息，其实就是在每个路由身上配置一份数据
3.路由守卫
在meta对象中，可以配置一个roles属性，其中可以配置路由的访问权限，下图中可访问的人已标记为admin，vip及user
其次，在 router.beforeEach 及 router.AfterEach 中可以配置信息
router.beforeEach 是路由前置守卫，每次跳转路由之前，都会拦截，其中next()方法表示下一步（跳转）,其中是一个回调函数，其中有三个参数to,from,next
router.AfterEach是 路由后置守卫，其中可以将页面的title设置为meta属性中设置的title,其中是一个回调函数，其中有两个参数to,from
浏览器的访问权限可以在application中的session storage中添加一个roles：admin，如果路由信息中meta中未设置roles，则无法访问该设置了roles属性的路由页面
安装： npm install nprogress（给路由页面的跳转添加一个上方的进度条）
导入：
首先在页面views中创建一个文件夹，然后在该文件夹中创建两个二级路由页面，如下图所示
然后在所需要创建二级路由的一级路由创建信息中添加一个 children数组 ，该数组中添加二个对象，每个对象就是该一级路由页面的一个二级路由页面，如下图所示，该二级路由信息中的component信息采用了 路由懒加载 的方式导入
然后在一级路由页面one.vue中写入二级路由页面的router-link导航和router-view
最终效果如下图所示
② webpack打包VUE项目读取外部配置文件，灵活配置域名
1.在index.html中引入js
<script src="./static/config.js"></script>
2.man.js
③ vue.config.js 配置
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
在根目录中创建 vue.config.js
这个文件应该导出一个包含了选项的对象：
publicPath
把开发服务器架设在根路径，可以使用一个条件式的值：
outputDir
assetsDir
indexPath
filenameHashing
pages
其值应该是一个对象，对象的 key 是入口的名字，value 是：
lintOnSave
runtimeCompiler
transpileDependencies
proctionSourceMap
crossorigin
integrity
Webpack相关配置
configureWebpack
chainWebpack
css.moles
css.extract
css.sourceMap
css.loaderOptions
支持的 loader 有：
devServer
devServer.proxy
parallel
pwa
pluginOptions
④ 如何在启动 Vue 程序之前读取本地静态文件内容
有这样一个需求，就是希望通过本地的 Json 文件来写入一些内容，比如请求后端接口的 API 前缀，我们在 public 目录下面新建一个 project.config.json 文件来做一些配置项：
这样有一个好处就是项目打包发布之后的文件也可以通过更改这个静态文件来改变一些配置项，省的因为频繁更改配置，而需要重新打包
然后我们在程序的主文件 main.js 中来通过请求这个静态文件，然后将读取的结果存在 Vue 的全局属性 $config 下面
那么接下来我们还需要在 Vue 程序实例化之前就执行 getConfig() 方法 ，这样才能确保我们在请求后端接口的时候能提前拿到 API 的 baseUrl
是不是很灵活，应该还有很多的场景能够用到该方法。
⑤ webpack打包vue项目，可修改配置文件
vue项目打包完成后，如需改变配置文件中的信息，比如域名修改（如下图config.js），是不可能在配置文件中直接更改的，因为配置文件是前端写死的，这时只能手动更改项目中的配置，然后重新打包npm run build
var packConfig = require('../src/config')//引入原配置文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin')//引入插件
var createServerConfig = function(compilation){//声明转换函数，将对象转为json字符串
return JSON.stringify(packConfig)
}
plugins里添加
new GenerateAssetPlugin({//生成文件，并添加入内容
filename: 'config.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
import axios from 'axios'//引入一个ajax封装工具
import storage from 'services/storage'//引入对缓存操作的封装工具
var getConfigJson = function () {
//声明一个函数，用来读取json文件并将其内容存入缓存
axios.get('config.json').then((result) => {
//读取文件
storage.setItem('config', result.data)
}).catch((error) => {
console.log(error)
})
}
⑥ vue打包后生成可配置文件，用于修改接口路径等
vue打包发布后，如果接口地址等发生变更，需要重新打包，过于繁琐。因此需要将一些例如接口地址、网站参数等拿出来动态配置。
具体步骤如下：
1、安装generate-asset-webpack-plugin插件
npm install generate-asset-webpack-plugin --save-dev
2、在vue.config.js中配置如下：
3、使用
在main.js中全局引入
4、打包后dist下生成.json文件，修改接口后生效
如果你有更好的方法也请留言哦。。。
⑦ electron-vue 项目启动动态获取配置文件中的后端服务地址
最近的项目迭代中新增一个需求，需要在electron-vue 项目打包之后，启动exe 可执行程序的时候，动态获取配置文件中的 baseUrl 作为服务端的地址。electron 可以使用 node 的 fs 模块来读取配置文件，但是在项目打包之后项目的静态资源都会被编译成其他文件，本文来记录下相关实现和知识点。
这里需要注意 electron-builder 中两个常用的配置选项：extraResources 拷贝资源到打包后文件的 Resources 目录中，extraFiles 拷贝资源到打包目录的根路径下，这里使用extraResources ,其中 from 表示需要打包的资源文件路径，to 值为 “../” 表示根路径。
代码如下：
打包之后配置文件会被拷贝过来
同样，页面也能拿到对应的数据，这样就可以通过修改配置文件，动态修改连接服务端ip了。
文章来自https://www.cnblogs.com/zaishiyu/p/16358578.html