vue3.0打包后頁面空白，放置服務器

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":"/",