目录
2.Vue CLI 处理静态资源并和后端框架一起作为部署的一部分时
通用指南
打包
显然当我们使用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才能正常使用