Nginx vue 多单页 history路由模式 配置

Posted 2020-12-17 叽叽喳喳，嘻嘻哈哈

webpack 部分相关配置

const path = require(‘path‘);
const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);
const htmlWebpackPlugin = require(‘html-webpack-plugin‘);
const VuetifyLoaderPlugin = require(‘vuetify-loader/lib/plugin‘);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin‘);

module.exports = {
    mode: ‘development‘,
    entry: {
        admin: ‘srcDir/admin/index.ts‘,
        blogs: ‘srcDir/blogs/index.ts‘,
    },
    output: {
        // 通过 path + filename 指定打包输出位置 一
        // path: path.resolve(__dirname, ‘../dist/static/js‘),
        // filename: ‘[name]_[hash:8].js‘,
        // publicPath: ‘/static/js/‘,

        // 通过 path + filename 指定打包输出位置 二
        path: path.resolve(__dirname, ‘../dist/static/‘),
        filename: ‘js/[name]_[hash:8].js‘,
        publicPath: ‘/static/‘, // 这个要格外注意：输出到页面 <script src={ publicPath + filename }></script>
    },
    plugins: [
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: ‘../admin.html‘, // 指定输出路径-相对路径，相对于（默认路径） output.path
            template: path.join(__dirname, ‘../src/assets/index.html‘),
            chunks: [‘admin‘],
            title: ‘admin‘,
        }),
        new HtmlWebpackPlugin({
            filename: path.join(__dirname, ‘../dist/blogs.html‘), // 指定输出路径-绝对路径，
            template: path.join(__dirname, ‘../src/assets/index.html‘),
            chunks: [‘blogs‘],
            title: ‘blogs‘,
        }),
    ],
};

nginx 配置

server {
    listen 8080;
    server_name  localhost 127.0.0.1;
    root  /home/an/poker-face/dist/;

    location  /admin/ {
        alias /home/an/poker-face/dist/;
        index  admin.html;
        try_files $uri $uri/  /admin/;
    }

    location /blogs { # 结尾加不加 / 都行，反正会重定向到 /blogs/；但是如果这里尾部加了/， 那么 alias 也必须以 / 结尾.
        alias /home/an/poker-face/dist;
        index blogs.html;
        try_files $uri $uri/ /blogs/;
    }
}