【JavaScript源代码】Vue项目打包部署到apache服务器的方法步骤.docx

Vue项目打包部署到apache服务器的方法步骤 　　vue项目在开发环境下，让项目运行起来，是通过npm run dev命令，原理是在本地搭建了一个express服务器。　　但是在服务器上就不是这样的，必须要通npm run build命令来对整个项目进行打包，打包后会在项目目录下生成一个dist文件夹，内容如下：　　然后就是把这些文件丢到服务器上的某个文件夹下，我这里的文件夹名字是ibms　　1. 直接去访问http://www.xxx.com/ibms/，会发现网页是白屏的，什么都没有，这就比较奇怪了，其实是因为资源加载的路径有问题！　　解决方法：　　在config中的index.js里 Vue.js 是一款流行的前端框架，用于构建用户界面。在开发过程中，我们通常使用 `npm run dev` 命令启动一个本地的开发服务器，如基于 Express 的开发服务器。然而，当项目需要部署到生产环境，比如Apache服务器时，流程会有所不同。 你需要通过 `npm run build` 命令对Vue项目进行打包。这个过程会生成一个名为 `dist` 的文件夹，包含优化过的静态资源文件，如JavaScript、CSS和图片等。这些文件将被上传到Apache服务器的一个特定目录，例如 `ibms`。 在部署过程中，可能会遇到一个问题，即直接访问 `http://www.xxx.com/ibms/` 时，页面显示为白屏。这是因为Vue项目在打包后，其资源引用的路径可能基于根目录，而不是基于部署的子目录。为解决这个问题，你需要在项目配置中进行调整。具体是在 `config/index.js` 文件的 `build` 部分，将 `assetsPublicPath` 设置为 '/ibms/'，这样资源引用将会以 `ibms` 目录作为基路径。 此外，Vue路由配置也需要相应调整。在 `router/index.js` 文件中，需要设置 `mode` 为 `'history'`，并添加 `base` 属性，值同样设为 '/ibms/'。这确保路由解析能正确地处理在 `ibms` 子目录下的URL。 完成上述配置后，再次执行 `npm run build`，将新打包的文件上传至服务器的 `ibms` 目录。此时，页面应该可以正常访问了。 然而，如果尝试通过URL栏直接访问子页面或刷新页面，可能会遇到404错误。这是因为Vue的`history`模式路由需要服务器支持。对于Apache服务器，你可以在 `ibms` 目录下创建一个 `.htaccess` 文件，并添加如下配置： ```apache <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /ibms/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /ibms/index.html [L] </IfModule> ``` 这段配置的目的是将所有非文件、非目录的请求重定向到 `index.html`，从而让Vue的路由处理器接管。记得在修改`.htaccess`后重启Apache服务器，以使改动生效。 总结来说，Vue项目部署到Apache服务器涉及的关键步骤包括：1) 使用 `npm run build` 打包项目；2) 修改 `config/index.js` 中的 `assetsPublicPath` 和 `router/index.js` 中的 `base`；3) 创建 `.htaccess` 文件并设置重写规则。通过这些步骤，你可以确保Vue应用在Apache服务器上能够正常运行。