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

2023-08-18 03:56| 来源: 网络整理| 查看: 265

项目场景：

通过 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 中和标签的 crossorigin 属性。 crossorigin: "", // 在生成的 HTML 中的和标签上启用 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: '' } } } }

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

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

【本文地址】

公司简介

联系我们