Vue项目打包部署教程及常见错误-前端开发

目录

通用指南

打包

部署

        1.静态或独立于后端部署前端应用时

        2.Vue CLI 处理静态资源并和后端框架一起作为部署的一部分时

常见错误

一、publicPath引起的错误

二、在 history 模式下使用 Vue Route

三、PAW插件

通用指南

---

打包

        显然当我们使用vue手脚架时已具备node.js

        使用直接使用命令  npm run build

        之后我们在项目文件中可以找到dist文件，其即为打包之后的项目

部署

        1.静态或独立于后端部署前端应用时

        此时直接将dist内的文件部署到服务器根路径下即可，要注意默认dist内的文件只能部署到根路径之下（也就是说只能放在例如"www.xxx.com/"之下而非"www.xxx.com/a"之下），如果不这么做vue项目将无法正常工作。

        如果想将项目部署到非根目录之下，需要在原项目的vue.config.js进行修改（之后再打包）

        我们需要使用publicPath参数，其默认值为 ' / ' 即根路径

        在vue.config.js中进行修改：

module.exports = defineConfig({
  publicPath : './'
})

        ' ./ '或者'  '可以将所有资源设为相对路径，这样打包后可以被部署到任意路径

        当然也可以设为对应部署时的路径，如

部署在https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

         但是要注意当属于以下情形时请部署时尽量使用对应路径而非使用相对路径：                 

• 当使用基于 HTML5 history.pushState 的路由时

• 当使用 pages 选项构建多页面应用时

        2.Vue CLI 处理静态资源并和后端框架一起作为部署的一部分时

        此时仅仅需要确保 Vue CLI 生成的构建文件在正确的位置，并遵循后端框架的发布方式即可

常见错误

---

一、publicPath引起的错误

二、在 history 模式下使用 Vue Route

此时应配置生产环境服务器，将任何没有匹配到静态文件的请求回退到 index.html

可参考

三、PAW插件

使用PAW时一定要用HTTPS才能正常使用