Vue配置多页面,多入口【vue-cli3 配置登陆页面】 亦凉 2022-02-24 02:16 371阅读 0赞 ### 很久之前就想去配置一个非单页面的登陆页面,一直到今天才完成 ### **我将给出最简单的代码,完成最基本的配置。需要更强的功能自己去加上** **效果如下** ![在这里插入图片描述][20190402193541201.gif] #### 第一步:创建登陆页面的文件 #### ###### 1-1:login.html ###### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70] <!DOCTYPE html> <html lang="en"> <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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>login</title> </head> <body> <div id="login"></div> </body> </html> ##### 1-2:login.main.js login.router.js login.vue ##### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1] **login.main.js** import Vue from 'vue'; import login from './login.vue'; import router from './login.router'; // import store from './store'; Vue.config.productionTip = false; new Vue({ router, render: h => h(login), }).$mount('#login'); **login.router.js** import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ ],}); **login.vue** <template> <a href="/"> 登陆</a> </template> <script> export default { } </script> <style lang="less" scoped> </style> #### 第二步:配置 vue.config.js #### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2] const baseUrl = '/'; before: function(app) { const base = baseUrl.replace(/\/+$/, ''); // 移除尾部斜杠 app.get(`${ base}/:page/*`, function(req, res, next) { if (['login', 'index'].includes(req.params.page)) { // 把 /<base>/<page>/* 重定向到 /<base>/<page>/ req.url = `${ base}/${ req.params.page}/`; next('route'); } else { next(); } }); }, pages: { login: { entry: 'src/login/login.main.js', template: 'public/login.html', }, index: { entry: 'src/main.js', template: 'public/index.html', }, }, [20190402193541201.gif]: /images/20220224/753f8b7aa9c54f94b968fd2d4f8d6619.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220224/88c34fc8e70c4304946a0ca5e85462b4.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20220224/ea97420be09d46968f3a86bb37a85ab6.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: /images/20220224/55a701bebe014f37abb8598305b8abac.png
还没有评论,来说两句吧...