vue3.0打包后页面空白，放置服务器

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue 3.0打包后页面空白，是因为打包使用的路径直接用“/”，而不是用“./”，./指的是相对路径，打包后放在服务器任何位置都行；

在vue.config.js中配置

module.exports = {
    publicPath:process.env.NODE_ENV=="production"?"./":"/",  //打包配置，解决页面空白的配置方案。
    lintOnSave: true,
//配置跨域
    devServer: {
        open: true,
        host: 'localhost',
        port: 3000,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {//配置跨域
            '/api': {
                target: 'http://106.12.148.51',//这里后台的地址模拟的;应该填写你们真实的后台接口
                ws: true,
                changOrigin: true,//允许跨域
                pathRewrite: {
                    '^/api': ''//请求的时候使用这个api就可以
                }
            }
        }
    },
//配置别名信息
    chainWebpack: (config)=>{
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets',resolve('src/assets'))
            .set('components',resolve('src/components'))
            .set('static',resolve('src/static'))
            .set("views",resolve("src/views"))
    }
}

vue3中vue.config.js 中只需要配置

publicPath:process.env.NODE_ENV=="production"?"./":"/",就可以实现页面放置在服务器上不是空白，process.env.NODE_ENV,在打包时自动切换到“production”环境。



当然，如果知道项目会放置在服务器上的具体位置，如服务器的/book目录下
只需要这样配置

publicPath:process.env.NODE_ENV=="production"?"/book":"/",

以上是 vue3.0打包后页面空白，放置服务器 的全部内容， 来源链接： utcz.com/z/378951.html

回到顶部