Vue 打包后静态资源加前缀,页面路由加前缀,修改静态资源访问路径

记录一下做过的需求,了解的不多,有不对的地方请指出,谢谢~

需求是:同一个的服务的同个端口号,根据后面接着的内容不同访问不同的管理系统。

举个例子:http://127.0.0.1:8088/admin  访问的是A管理平台     http://127.0.0.1:8088/test   访问的是B管理平台。

这需要给页面路由,以及访问的静态资源加admin, test。并且配置好nginx。

因为vue-cli版本的不同,文件结构不同,加前缀的方法也不一样。

vue-cli2:  由于我用的是vue-cli3,2.0版本的没试过可能有问题。

(1)给静态资源加前缀有两种方法:

  •       在config / index 文件里修改dev(npm  run dev本地启动项目时)和build(npm run build 打包时)下的  assetsPublicPath:”/前缀”

Vue 打包后静态资源加前缀,页面路由加前缀,修改静态资源访问路径

  • 在npm run build打好的dist包里 ,/dist/config/index.js文件中修改 ['domain']=“/前缀”   也可以

Vue 打包后静态资源加前缀,页面路由加前缀,修改静态资源访问路径

(2)给路由加前缀:而且路由模式用的是hash,

Vue 打包后静态资源加前缀,页面路由加前缀,修改静态资源访问路径

Vue-cli3:

(1)静态资源前缀:

     vue.config.js 中:   module.exports ={ publicPath:”/前缀" ,  …...}

Vue 打包后静态资源加前缀,页面路由加前缀,修改静态资源访问路径    

(2)页面路由前缀:

      router.js里:export default new Router({ base:”/前缀" ,           })

Vue 打包后静态资源加前缀,页面路由加前缀,修改静态资源访问路径

nginx:   nginx的配置我不是很了解  放在这里做个参考

location ^~ /amdin{
        alias /home/user/html/manager;
        try_files $uri $uri/  /admin/index.html;
    }