189 8069 5689

vue-cli2.9.1中webpack存在问题的示例分析-创新互联

这篇文章主要为大家展示了“vue-cli 2.9.1中webpack存在问题的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-cli 2.9.1中webpack存在问题的示例分析”这篇文章吧。

创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,微信小程序,10多年建站对成都软装设计等多个领域,拥有丰富的营销推广经验。

最近vue-cli更新,用其构建项目的时候,发现bulid文件下少了两个文件,分别是dev-sever.js和dev-client.js

vue-cli 2.8

vue-cli 2.9.1中webpack存在问题的示例分析

vue-cli 2.9.1

vue-cli 2.9.1中webpack存在问题的示例分析

这是为什么呢

我们查看下package.json

vue-cli 2.8

vue-cli 2.9.1中webpack存在问题的示例分析

vue-cli 2.9.1

vue-cli 2.9.1中webpack存在问题的示例分析

由此可知 在最新版本的vue-cli中webpack版本更新到v3.6.0了。

既然更新了 那就我们就重新开下webpack的配置项。

vue自启浏览器设置

当我们启动npm run dev执行此cli的时候发现 居然不会自己启动浏览器了

这样的话 岂不是装逼不了? 不不不 还是可以的,只要我们修改下配置项就可以了

我们先看看 我们npm run dev 到底执行了什么

继续查看package.json的scripts选项的dev 配置

vue-cli 2.9.1 package.json

vue-cli 2.9.1中webpack存在问题的示例分析

对比下就知道 当我们运行npm run dev 实际上是执行了webpack-dev-server –inline –progress –config build/webpack.dev.conf.js

vue-cli 2.8 package.json

vue-cli 2.9.1中webpack存在问题的示例分析

跟之前运行npm run dev 有区别 也好说明了他要删除这两个文件的原因了,因为最新版本的webpack的配置中是采用webpack-dev-server这个插件进行的启动浏览器的 可以在官网进行查看他的一个API使用说明

build/webpack.dev.conf.js 运行路径 那查看下其配置

vue-cli 2.9.1 build/webpack.dev.conf.js

vue-cli 2.9.1中webpack存在问题的示例分析

查看API就知道这个open 这个参数就是打开自启服务器的原因,但是config.dev.autoOpenBrowser这个是什么呢,我们可以向上查找

vue-cli 2.9.1中webpack存在问题的示例分析

刚好对应config的定义 require就是加载进来 那就是继续查看对应的路径 刚好对应config文件下的index.js 在require默认是其下的index文件 这里就对应index.js

config/index.js

vue-cli 2.9.1中webpack存在问题的示例分析

这里的autoOpenBrowser对应false ,既然我们要改动那就直接改为true就可以。然后在重启下服务 就可以自启动服务了

其中的port也可以改对应的启动端口,在最新版本的vue-cli配置中 即使设置的端口被占用了,他自动会在其端口在加1 开启服务的。

饿了吗APP 接口设置问题

由于bulid文件夹下的两个文件没有,那饿了吗接口怎么设置呢。

在此之前我们理解下饿了吗app的接口的设置原理,由于数据都是直接从data.json这个文件获取的,所以呢,我们要模拟mock做个接口。但是在饿了吗APP的设置中 它是直接启动服务的时候把接口给做好了,这也是为什么我们可以直接访问其/api/seller有对应数据

vue-cli 2.9.1

vue-cli 2.9.1中webpack存在问题的示例分析

在vue-cli 2.9.1之前版本是在dev-server.js直接设置的 具体参数在

vue-cli 2.9.1

vue-cli 2.9.1中webpack存在问题的示例分析

方法一:

回到起点,在最新版本vue-cli的配置中浏览器服务都在webpack-dev-server 这个插件中,那我们就其在webpack.dev.conf.js进行修改

现在我们的要求就是怎么在服务开启的时候接口数据也对应做好呢,那我们查看其插件API 刚好有一个参数就是devServer.before

devServer.before

vue-cli 2.9.1中webpack存在问题的示例分析

就是解决问题所在了。 进行修改

webpack.dev.conf.js

vue-cli 2.9.1中webpack存在问题的示例分析

这样我们就可以直接发送API请求数据了

this.axios.get("/api/seller").then(function(res){
 // do something
})

方法二

会node的也可以直接做个api接口,开启node服务 然后饿了吗项目直接访问这个接口,当然这里会存在跨域问题和路由映射,不过webpack-dev-server 帮你们解决这个问题了 主要是设置参数问题 devServer.proxy 进行路由映射等等

vue-cli 2.9.1中webpack存在问题的示例分析

不过这些还需要考虑到自身能力,我建议还是使用第一种方法

以上是“vue-cli 2.9.1中webpack存在问题的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文名称:vue-cli2.9.1中webpack存在问题的示例分析-创新互联
网页网址:http://jkwzsj.com/article/eijsp.html

其他资讯