vue后台管理系统实现

用vue实现后台管理系统思路： 要在 浏览器上访问， 所以要依赖 本地服务器。启动本地服务器，然后查看页面。

如果要在其他文件下 写代码。 那就再其他文件使用webpack 打包到 本地服务器所在的文件夹。

​ 例如： 文件夹名称

​ 服务器文件夹 server

​ 后台管理文件夹 admin

定义一个目录，

express 快速搭建本地服务器 启动 nodemon app.js(快速搭建得文件名)

// 引入express
let express = require('express');
// 引入ejs
let ejs = require('ejs');
// 服务器模块
let http = require('http')
let https = require('https')
// 引入fs和path
let fs = require('fs');
let path = require('path');

// 创建应用
let app = express();
// 拓展名
app.engine('.html', ejs.__express);

// 实现资源静态化
// static请求静态化
app.use('/static/', express.static(path.join(process.cwd(), './static/')))
app.use('/favicon.ico', express.static(path.join(process.cwd(), './static/favicon.ico')))

// 路由，
app.get('/', (req, res) => {
    res.render('home.html')
})
// 后台管理系统的路由
app.get('/admin', (req, res) => {
    res.render('admin.html')
})

// mock数据
app.use('/data/', (req, res, next) => {
    // 添加拓展名
    // req.url += '.json';
    // console.log(req.url)
    // 1 切割url
    let arr = req.url.split('?')
    // 2 添加拓展名
    arr[0] += '.json';
    // 3 拼接地址
    req.url = arr.join('?')
    // 进入下一个中间件
    next();
}, express.static(path.join(process.cwd(), './static/data/')))


// 服务器，
// 端口号
let httpPort = 3001;
let httpsPort = 3002;
// 读取秘钥文件
let key = fs.readFileSync(path.join(process.cwd(), './ssl/private.pem'));
let cert = fs.readFileSync(path.join(process.cwd(), './ssl/file.crt'));
// http
http.createServer(app)
    .listen(httpPort, res => console.log('http port listen at ' + httpPort))
// https
https.createServer({ key, cert }, app)
    .listen(httpsPort, res => console.log('https port listen at ' + httpsPort))

webpack.config.js 代码

// 引入path
let path = require('path');
// 根路径
let root = process.cwd();
// vue插件
let { VueLoaderPlugin } = require('vue-loader');
// 引入模板插件
let HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入拆分样式插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩样式
let OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 接口
module.exports = {
    // 模式
    // mode: 'production',
    mode: 'development',
    // 解决问题
    resolve: {
        // 拓展名
        extensions: ['.js', '.vue', '.es'],
        // 别名
        alias: {
            // vue
            vue$: 'vue/dist/vue.js',
            '@': path.join(root, './src'),
            '@c': path.join(root, './src/components'),
            '@v': path.join(root, './src/views'),
            '@t': path.join(root, './src/tools'),
        }
    },
    // 入口
    entry: './src/main.js',
    // 发布
    output: {
        // 相对路径
        path: path.join(root, '../server'),
        // static/admin
        filename: './static/admin/[name].js',
        // 静态资源相对位置
        publicPath: '/'
    },
    // 模块
    module: {
        // 加载机
        rules: [
            // es6
            {
                test: /\.js$/,
                // loader: 'babel-loader',
                // options: {
                //     presets: ['@babel/preset-env']
                // }
                // 处理的文件
                include: path.join(root, './src/'),
                // 不处理的文件
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            },
            // vue
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader',
                        // 配置
                        options: {
                            extractCSS: true
                        }
                    }
                ]
            },
            // css
            {
                test: /\.css$/,
                use: [
                    'style-loader', 
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            // scss
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            // 字体图标
            {
                test: /\.(ttf|woff)$/,
                use: [
                    'url-loader'
                ]
            }
        ]
    },
    // 插件
    plugins: [
        // html插件
        new HtmlWebpackPlugin({
            // 模板位置
            template: './public/index.html',
            // 发布位置
            filename: './views/admin.html',
            // 指纹
            hash: true
        }),
        // vue
        new VueLoaderPlugin(),
        // 拆分样式
        new MiniCssExtractPlugin({
            filename: './static/admin/style.css'
        }),
        // 压缩css
        new OptimizeCssAssetsPlugin()
    ],
    // 优化
    optimization: {
        // 拆分库文件
        splitChunks: {
            // 缓存
            cacheGroups: {
                // 库文件发布到lib目录下
                lib: {
                    name: 'lib',
                    test: /node_modules/,
                    chunks: 'initial'
                }
            }
        }
    }
}

未完