vuecli3配置全局域名抽离和history模式下的调整等

做~自己de王妃 提交于 2019-12-23 12:22:22

1.1配置通用的变量ip域名等使用的配置文件:

(该方法会被打被打包,如果是要想打包后修改域名会比较麻烦)
在与src同级创建两个文件:
这是开发环境配置的文件
这是生产环境配置的文件
然后在文件内部这样写变量:
在这里插入图片描述
接下来就可以通过vuex或者直接进行全局应用了!
在这里插入图片描述

1.2配置被抽离出来的ip域名变量

(上一种方法不能在打包后修改域名,这种方法能解决这样问题)
在src同级的pablic文件下创建config.js文件:
在这里插入图片描述
然后在文件中写域名或者其他想要配置的全局变量信息:
在这里插入图片描述
最后在进行应用:
在这里插入图片描述
打包完成后的config.js(可以进行修改):
在这里插入图片描述

2.1history模式下进行打包

这个模式地址栏不会有#号
首先:在router/index.js中
在这里插入图片描述
ps:如果服务器不是根路径,需要这样:

在这里插入图片描述
然后在src同级的目录下创建的-打包-配置文件vue.config.js配置publicPath
在这里插入图片描述
ps:当服务器不是根路径时:(/font-test/为你服务器dist文件放的文件名)
在这里插入图片描述
接下来打包即可。

3.1后台的配置

通过nginx配置的服务:
也可以参考这边文章:
https://segmentfault.com/a/1190000017009422?utm_source=tag-newest

首先下载nginx,然后修改conf/nginx.conf
在这里插入图片描述
ps:服务器非根路径:
在这里插入图片描述
然后把dist文件放在
在这里插入图片描述然后启动nginx:双击exe或者在该文件下打开cmd:输入nginx -s reload
然后在浏览器输入http://localhost回车即可;

ps:注意三个地方是否是根目录。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!