vue项目前端加前缀(包括页面及静态资源)的操作方法
作者：Slow菜鸟
具体步骤
Vue 中配置
（1）更改router模式，添加前缀
位置：router文件夹下面的index.js
const router = new Router({
base: '/nhtjfx/', // 路由前缀（该地方配置后，会发现你的启动地址也会加上这个前缀）
mode: 'history', // 采用history模式URL的路径才跟配置的对应上，不然URL是先加/#再追加配置的地
routes:[...]
});（2）实现静态文件加前缀
位置：vue.config.js
静态资源css,js之类的的src或href引用位置会加上这个前缀,会体现在打包后的index.html文件内容
例如
未加之前：<link href="./static/js/chunk-c8ec8b4a.e230ecc5.js" rel="external nofollow" rel="prefetch"> 加之后：<link href="/nhtjfx/static/js/chunk-c8ec8b4a.e230ecc5.js" rel="external nofollow" rel="prefetch">
module.exports = {
publicPath: '/nhtjfx/',
}（3）nignx配置
server {
listen 8088;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /nhtjfx/ {
alias /usr/local/linewell/web/nhjcfx/front/nhtjfx/;
index index.html;
try_files $uri $uri/ /nhtjfx/index.html;
}
#location / {
# root /usr/local/linewell/web/nhjcfx/front/nhtjfx;#vue前端项目打包后放在这里
# root /usr/local/linewell/web/nhjcfx/front/build;
# index index.html index.htm;#这个index.html 是上面dist目录下的index.html
# try_files $uri $uri/ /index.html; # 解决刷新出现404
# }
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}补充：
Vue项目添加前缀，ngnix发布相关修改
项目场景
本人有个vue前端项目，要对接别人的平台，需要加个前缀，但是这个项目本地也会使用，所以最后希望的效果是加了前缀和未加前缀都是可以使用的。
vue项目加前缀
项目使用的是vue 2.6
静态文件的加前缀
加前缀的方式是使用vue.config.js配置文件，再这个配置文件中，加入publicPath:"/aaa" aaa是前缀。publicPath是实现静态文件加前缀
module.exports = {
publicPath: "/aaa",
};
实现的效果：dist下的index.html文件中的静态文件的引入路径会加上前缀：
<script src="/aaa/js/app.63e0b2dc.js"></script>
路径加前缀
Vue的route中加入base
base:"/aaa" 实现路由加入前缀
路径的跳转会自动带上前缀/aaa
ngnix配置的更改：
首先必须清楚ngnix中的alias和root的区别
- root读取的时根目录。可以在server或location指令中使用。
- alias只能在location指令中使用。
location命中后
如果是root，会把请求url的 ip/域名+port替换为root指定的目录，访问资源
如果是alias，会把请求url的ip/域名+port+匹配到的路径替换为alias指定的目录，访问资源
举个栗子：
若请求的是：http://example.com/ftt/baa/hello.html，location配置如下
location /ftt{
root /home/abc/;
}则实际的http://example.com/替换为/home/abc访问路径：/home/abc/ftt//baa/hello.html
若请求的是：http://example.com/ftt/baa/hello.html，location配置如下
location /ftt{
alias /home/abc/;
}则实际的http://example.com/ftt替换为/home/abc访问路径：/home/abc/baa/hello.html
到此这篇关于vue项目前端加前缀(包括页面及静态资源)的操作方法的文章就介绍到这了,更多相关vue 前端加前缀内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！