vue3（二）配置标题和服务代理

这里的标题如何改成自己的标题。

1. 第一步：修改vue.config.js

  transpileDependencies: true,
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = '星芒控制台'
                return args
            })
    },

2、标题改了 如何加上服务代理呢

    devServer: {
        port: 6600,
        open: false,
        https: false,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        // 配置多个代理
        proxy: {
            [`^${VUE_APP_BASE_API}`]: {
                target: VUE_APP_SERVER_URL,
                changeOrigin: true,
                pathRewrite: {
                    [`^${VUE_APP_BASE_API}`]: VUE_APP_BASE_REWRITE_API
                }
            }
        }
    },

最终vue.config.js 文件内容如下了：

const {defineConfig} = require('@vue/cli-service');


const VUE_APP_BASE_API = process.env.VUE_APP_BASE_API;
const VUE_APP_BASE_REWRITE_API = process.env.VUE_APP_BASE_REWRITE_API;
const VUE_APP_SERVER_URL = process.env.VUE_APP_SERVER_URL;

console.log(VUE_APP_BASE_API,"=====VUE_APP_BASE_API========")

module.exports = defineConfig({
    transpileDependencies: true,
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = '星芒控制台'
                return args
            })
    },
    devServer: {
        port: 6600,
        open: false,
        https: false,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        // 配置多个代理
        proxy: {
            [`^${VUE_APP_BASE_API}`]: {
                target: VUE_APP_SERVER_URL,
                changeOrigin: true,
                pathRewrite: {
                    [`^${VUE_APP_BASE_API}`]: VUE_APP_BASE_REWRITE_API
                }
            }
        }
    },
})

我这里采用了process.env 来配置相关参数。这样就可以开始进行简单开发了。