使用@vue-cli 3.x 启动时访问默认页面

叁歲伎倆 2023-07-23 03:34 3阅读 0赞

### 使用@vue-cli 3.x 启动时访问默认页面 ###

*   *   *  vue.config.js
         *  router/index.js
         *  App.vue
         *  views/Login.vue

### vue.config.js ###

module.exports = { 
        outputDir: 'dist',
        /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
        assetsDir: 'assets',
        /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
        productionSourceMap: false,
        /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
        filenameHashing: false,
        /* 代码保存时进行eslint检测 */
        lintOnSave: true,
        /* webpack-dev-server 相关配置 */
        devServer: { 
            /* 自动打开浏览器 */
            open: true,
            /* 设置为0.0.0.0则所有的地址均能访问 */
            host: 'localhost',
            port: 8086,
            https: false,
            hotOnly: false,
            /* 使用代理 */
            proxy: { 
                '/api': { 
                    ws: false, // proxy websockets
                    /* 目标代理服务器地址 */
                    target: 'http://localhost:8081',
                    /* 允许跨域 */
                    changeOrigin: true,
                    pathRewrite: { 
                        '^/api': ''
                    } // 真正访问的时候去掉/api
                }
            }
        }
    }

### router/index.js ###

import Vue from 'vue'
    import VueRouter from 'vue-router'
    const Login = () => import('../views/Login.vue')
    
    Vue.use(VueRouter)
    
    const routes = [{ 
        path: '/',
        name: 'Login',
        component: Login,
        hidden: true
    }
    ]
    
    const router = new VueRouter({ 
        routes
    })
    
    export default router

### App.vue ###

### views/Login.vue ###

<template>
        <div>
        
            <el-form :rules="rules" ref="loginForm" v-loading="loading" element-loading-text="正在登录..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :model="loginForm" class="loginContainer">
                <h3 class="loginTitle">系统登录</h3>
                <el-form-item prop="username">
                    <el-input size="normal" type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="normal" type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input size="normal" type="text" v-model="loginForm.code" auto-complete="off" placeholder="点击图片更换验证码" @keydown.enter.native="submitLogin" style="width: 250px"></el-input>
                    <img :src="vcUrl" @click="updateVerifyCode" alt="" style="cursor: pointer">
                </el-form-item>
                <el-checkbox size="normal" class="loginRemember" v-model="checked">记住我</el-checkbox>
                <el-button size="normal" type="primary" style="width: 100%;" @click="submitLogin">登录</el-button>
            </el-form>
        </div>
    </template>
    
    <script> export default { name: 'Login', data () { return { loading: false, vcUrl: , loginForm: { username: 'admin', password: '123', code: '' }, checked: true, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }], code: [{ required: true, message: '请输入验证码', trigger: 'blur' }] } } }, methods: { updateVerifyCode () { }, submitLogin () { } } } </script>
    
    <style> .loginContainer { border-radius: 15px; background-clip: padding-box; margin: 180px auto; width: 350px; padding: 15px 35px 15px 35px; background: #fff; border: 1px solid #eaeaea; box-shadow: 0 0 25px #cac6c6; } .loginTitle { margin: 15px auto 20px auto; text-align: center; color: #505458; } .loginRemember { text-align: left; margin: 0px 0px 15px 0px; } .el-form-item__content{ display: flex; align-items: center; } </style>