vue项目 前端加前缀(包括页面及静态资源)
vue项目 前端加前缀(包括页面及静态资源)
·
具体步骤
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="prefetch">
加之后:<link href="/nhtjfx/static/js/chunk-c8ec8b4a.e230ecc5.js" 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;
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)