Vue打包部署在域名二级目录的配置
最近搞一个demo
服务,需要把项目部署在域名
的二级目录
下,并且是用vue-router
的history的模式
。
我们都知道vue-router
的两种前端基本访问模式 hash
和history
。hash 模式
后面带#
,打包的时候只需要把绝对路径
(/
)换成相对路径
(./
),就可以部署在任何地方
,不需要服务器配合
,但是不好看,所以我们一般选择history
模式,但是history 模式
需要配合服务器
的部署。
本文主要是在vue-cli4
版本下,对部署在域名的二级目录
下做四处
的配置:
1、vue-router 路由的文件的配置,根据自己部署的二级目录填写
1 | export default new VueRouter({ |
2、在vue.config.js配置文件(如果没有新建一个,项目根目录下)
注意: baseUrl
从 Vue CLI 3.3
起已弃用
,请使用publicPath
1 | module.exports = { |
3、在入口文件中index.html 的head 标签内加入
1 | <meta base ="/web/"> |
4、最后就是部署配置,以nginx为例
1 | server { |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Mr.Pu 个站博客!
评论