Vue项目打包后不能正常显示页面

项目场景:

通过 Vue CLI 创建的 vue 项目,编写完项目后,通过 npm run bulid 对项目进行打包,再把打包得到的内容(dist文件夹)交给后端部署到服务器上。


问题描述:

对 vue 项目打包后,发现 dist文件中的 index.html 在浏览器中打开后页面内容无法显示,部署到服务器也一样不行,而 vue 项目在本地服务器运行时,页面是正常的。

本地服务器运行的首页:
在这里插入图片描述
打包后dist文件夹中的首页:
在这里插入图片描述
没看错,是真的什么内容都没有


原因分析:

vue 项目中缺少了 vue.config.js 文件。
在这里插入图片描述
vue-cli3 之后创建的时候并不会自动创建 vue.config.js,因为这个是个可选项,所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js 。


解决方案:

在项目根目录手动创建一个 vue.config.js 。
一个 vue-config.js 较完整的字段属性介绍:

module.exports = {

        // 选项
    
        //  基本路径
    
        publicPath: "./",
    
        //  构建时的输出目录
    
        outputDir: "dist",
    
        //  放置静态资源的目录
    
        assetsDir: "static",
    
        //  html 的输出路径
    
        indexPath: "index.html",
    
        //文件名哈希
    
        filenameHashing: true,
    
        
    
        lintOnSave: true,
    
        //  是否使用带有浏览器内编译器的完整构建版本
    
        runtimeCompiler: false,
    
        //  babel-loader 默认会跳过 node_modules 依赖。
    
        transpileDependencies: [ /* string or regex */ ],
    
        //  是否为生产环境构建生成 source map?
    
        productionSourceMap: true,
    
        //  设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
    
        crossorigin: "",
    
        //  在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
    
        integrity: false,
    
        //  调整内部的 webpack 配置
    
        configureWebpack: () => {}, //(Object | Function)
    
        chainWebpack: () => {},
    
        // 配置 webpack-dev-server 行为。
    
        devServer: {
    
            open: process.platform === 'darwin',
    
            host: '0.0.0.0',
    
            port: 8080,
    
            https: false,
    
            hotOnly: false,
    
            // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    
            proxy: {
    
                '/api': {
    
                    target: "http://app.rmsdmedia.com",
    
                    changeOrigin: true,
    
                    secure: false,
    
                    pathRewrite: {
    
                        "^/api": ""
    
                    }
    
                },
    
                '/foo': {
    
                    target: '<other_url>'
    
                }
    
            }
        }
    
    }

一般的小项目可能不需要上面这么复杂,按照需求来设置,按照上面的项目(初始化的项目),手动添加一个 vue-config.js 如下:

module.exports = {

        // 选项
    
        //  基本路径
    
        publicPath: "./",
    
        //  构建时的输出目录
    
        outputDir: "dist",
    
         //  放置静态资源的目录
    
        assetsDir: "static",
    
        //  html 的输出路径
    
        indexPath: "index.html",
    
        //文件名哈希
    
        filenameHashing: true,
    
        
    
        lintOnSave: true,
    
        //  是否使用带有浏览器内编译器的完整构建版本
    
        runtimeCompiler: false,
    
        //  babel-loader 默认会跳过 node_modules 依赖。
    
      
        // 配置 webpack-dev-server 行为。
    
        devServer: {
    
            open: process.platform === 'darwin',
    
            host: '0.0.0.0',
    
            port: 8080,
    
            https: false,
    
            hotOnly: false,
    
            // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    
            proxy: {
    
                '/api': {
    
                    target: "http://app.rmsdmedia.com", // 项目用到的域名
    
                    changeOrigin: true,
    
                    secure: false,
    
                    pathRewrite: {
    
                        "^/api": ""
    
                    }
    
                },
    
                '/foo': {
    
                    target: '<other_url>'
    
                }
    
            }
        }
    
    }

项目打包后,输出的项目即可正常显示:
在这里插入图片描述

  • 7
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值