A. 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) }) }
B. 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
C. 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文件，修改接口后生效 如果你有更好的方法也请留言哦。。。
D. 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 最终效果如下图所示
