js_脚本之家

一 将Vue项目打包

Vue项目特别是基于.vue单文件格式的门类配置,在build成js文件后公布到服务器上,日常都以经过nginx反向代理到跟文件目录后一直访问,可是由于过多时候不可能使用越多的子域名,所以需求将服务器布置到子目录。本阅世以一回成功的系统构造为例,疏解子目录方式配置Vue工程。

切换成花色目录下,输入cnpm run build金沙网址, 打包

js_脚本之家。率先介绍一下Poi,大家的种类还未动用webPack进行前端工程项目管理,使用了Poi进行田间管理:Develop
web apps with no build configuration until you
need.也便是说Poi对webpack进行了包装,0配置开荒Web应用。能够应用poi.config.js文件配置poi的陈设,也足以间接在package.json中打开布署。

二 URL 重写

实行npm run dev约等于实践poi,试行npm run dist也正是实行poi
build.施行poi
build打包后,会将static目录下的财富拷贝到dist目录,其余的js和css会自动降少成.js
和.css並且注入到index.html中。

案由是vue不是依据项目目录之处访谈的,是依赖vue-router转发路由访谈url,在那地我们相应张开url
rewriteurl write的法子有两种,一种是在iis下载url rewrite工具配置规则

poi项目只要急需打包到子目录,必需安装homePage为子目录。这是第一步

另一种是布局web.config文件,小编用的是第三种

其次步,必需将index.html中任何非Vue部分的能源扩展子目录的前缀,包罗网址的icon.

web.config内容

其三步保险Css文件中的财富路线为相对路线。

将该文件拷贝到打包好根目录上边

第四步,必要修正vueRouter中的base为子目录。

发觉成功访谈到大家的url

然后实施npm run dev 也正是npm build.观望打包后的index.html,css文件等。

总结

然后配置nginx到二级目录:

如上所述是作者给大家介绍的Vue项目打包安插到iis服务器的安顿格局,希望对大家所有助于,假设咱们有任何疑问请给自家留言,作者会及时恢复生机大家的。在那也特别感激大家对台本之家网址的支撑!倘使您以为本文对你有帮带,应接转发,烦请注脚出处,多谢!

location /ticket { alias /root/java/ticket/dist/; try_files $uri
$uri/ @rewrites; } location @rewrites { rewrite
^/(ticket|sign|reimburse卡塔尔(قطر‎/$ /$1/index.html last;
}这里$1对应url中的ticket,由于本人这里有三个类型共用了rewrite所以逻辑或了四个,假如独有一个子目录,使用^//(

然后配置nginx到二级目录: location /ticket { alias
/root/java/ticket/dist/; try_files $uri $uri/ @rewrites; } location
@rewrites { rewrite ^/(ticket|sign|reimburse卡塔尔(قطر‎/$ /$1/index.html last;
}这里$1对应url中的ticket,由于自己这里有多少个品种共用了rewrite所以逻辑或了两个,如若唯有叁个子目录,使用^/$,这里切记要把ticket扩起来。

此处切记要把ticket扩起来。

发表评论

电子邮件地址不会被公开。 必填项已用*标注