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

飞天代码

已于 2022-08-24 10:31:22 修改

阅读量639

点赞数 1

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2022-08-24 10:31:00 首次发布

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/126499531

版权

vue3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述
这里的标题如何改成自己的标题。

第一步：修改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 来配置相关参数。这样就可以开始进行简单开发了。