为什么要配置静态资源路径?

1、首先我们要清楚什么样的环境下我们需要配置静态资源路径?

那肯定是不是单纯的一个前端写的单页面应用的时候,我们仔细想想,如果我们开发了一个新模块,但是不是基于原来项目开发的,而实更换了一个路径?不不不,只是说新起了一个子路径,相当于二级路径,那么这个时候我们还能用原来的默认的配置去寻找接口地址,静态资源地址吗?

当然这样肯定是行不通的,所以说我们需要配置一下你当前这个模块放置在了哪一个服务器的子文件路径下

// 假如说 
// 我的服务器网址: https://www.x**x.com
当然这个服务器网址是用来存储已经开发好了的模块的,相当于主模块

二开,并不是基于主模块,而是另起一个新模块,新功能,这个时候就需要配置,为什么?
// 子模块网址路径:https://www.x**x.com/xxx
这个时候因为静态资源是根据全局路径,而不是根据相对路径来走的,不配置,全局路径那就会是 https://www.x**x.com后面直接拼接静态资源,但是要注意我们的文件是放置在这个xxx里的,那么这时就会报错,所以我们需要配置静态资源路径

2、如何配置?

直接打开

vue.config.js
module.exports = {
    // 配置静态资源路径  只需要配置一下/xxx即可,其实就是在路径前面加一个/xxx告诉vue让他去这个域名下这个publicPath下去找文件
    publicPath:"/xxx",
    // 此处放置需要更改的icon图标直接改ico  然后自己加一个png图片就可以了
    pwa: {
        //放要自己要改的png
        iconPaths: {
            favicon32: 'favicon.png',
            favicon16: 'favicon.png',
            appleTouchIcon: 'favicon.png',
            maskIcon: 'favicon.png',
            msTileImage: 'favicon.png'
        }
    },
    pages: {
        index: {
            entry: 'src/main.js', // 打包入库
            title: 'xxx评分系统',//放要改的title名
        },
    },
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {//配置跨域
            '/api': {
                target: 'http://127.0.0.1:8080',//这里后台的地址模拟的;应该填写你们真实的后台接口
                ws: true,
                changOrigin: true,//允许跨域
                pathRewrite: {
                    '^/api': '/xxx/api'//请求的时候使用这个api就可以
                }
            }

        }
    }
}
Logo

前往低代码交流专区

更多推荐