您好,登录后才能下订单哦!
这篇文章主要介绍“vue devserver如何配置”,在日常操作中,相信很多人在vue devserver如何配置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue devserver如何配置”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
每次改代码都需要重新部署,
或者只改变修改代码行的效果
所以出现了devserver本地服务
为了完成自动编译,webpack提供了几种可选的模式
方式一:webpack watch mode
实现方法一: 在导出的配置中,添加watch:true
实现方法二: 在启动webpack的命令中,添加–watch的标识
方式二:webpack-dev-server(常用)
上面的方式可以监听到文件的变化,但是事实上它本身没有自动刷新浏览器的功能的,
当然我们可以通过vscode使用live-server来完成这样的功能,但是我们希望不使用live-server的情况下,可以具备实时重新加载的功能
步骤:
1、安装npm install webpack-dev-server -D
2、增加命令"serve":“webpack serve”
3、npm run serve即可
用这个启动项目有个特点:
不会输出build文件夹
因为localhost8080—express(src等静态文件)
打包时直接将src等文件编译后放到内存里,然后直接使用express框架发起服务
如果先编译,放到外存里,然后将其上传到内存,然后使用express框架发起服务。那样会降低效率
在webpack.config.js中,写上
devServer:{ contantBase:"./abc" }
如果index.html里<script. src=“./aaa.js”>, 打包时会去找abc/aaa.js,这就是contantBase的作用,可以理解为去源代码里找文件,一般值是"./public"
因为webpack.config.js中配置了webcopyPlugin,如果没有配置,那么就不会
拷贝图片等静态文件,这时候就需要去public文件夹中寻找。
一般开发阶段使用contantBase
一般打包阶段(上传服务器)使用copyplugin
应用程序在运行过程中,替换,添加,删除模块都会重新刷新整个页面,拿计数器案例为例:
加到199了,js代码新增了console.log(“aaa”)
导致199变成了0
target:"web" devserver:{ contantBase:"./abc", hot:true,//热更新 open:true,//build自动打开浏览器 host://默认lolaohost,也可0.0.0.0,这样同一网段的主机都能通过ip访问 port:7777//访问项目时的端口号 compress:true浏览器请求静态资源时压缩一下,打开浏览器的检查时可以看到bundle.js的content-encoding是gzip,浏览器自动解压 }
main.js中,import "./js/element":改为 import "./js/element": if(module.hot){ module.hot.accept("./js/element.js",()=>{ console.log("模块发生更新了") } }
.vue文件中修改message也会触发模块热替换的
修改了这个配置需要重新npm run serve
localhost7777的项目代码中axios了localhost8000的数据moment,就会出现跨域访问报错,(浏览器不允许跨域)
解决办法
devserver:{ contantBase:“./abc”, hot:true, open:true, host: port:7777 proxy:{ “/api”:“http://localhost:8888” } }
然后在axious时,改成axious(“/api/moment”)
这样仍会报错,因为axious解析时会把/api/moment解析成http://localhost:8888/api/moment,所以会报错404
解决办法:
proxy:{ “/api”:{ target:“http://localhost:8888”, pathRewrite:{ “^/api”:“” }, secure:false,//若target是https,并且secure是true,就会停止访问 changeOrigin:true,//当前项目是localhost7777,代理是localhsot8888,在真实请求服务器时,服务器会检查源头在哪,如果不加changeOrigin,那么服务器会看到header里localhost:7777/api/moment,而不是8888 }
import时后边的括号可以写:
相对路径
绝对路径
node_module
下边介绍node_module:
webpack.config.js里有一个(如果没有,那就是全取得默认值)
resolve:{ modules : [“node_modules”]//默认从这里找,所以文件夹不能改名字 extension:[“.js”,“.vue”] alias:{ “js”:path.resolve(__dirname,“./src/js”), “@”:path.resolve(__dirname,“./src”), 这样配置上后main.js中的import不用写./开头了 } }
如何判断是文件还是文件夹呢
如果没有后缀,那么匹配js/json/jms去找文件,如果有那就是文件,如果没有那就是文件夹,如果是个文件夹,看看里边有没有index的文件
package.json中指令里
build值改为“webpack --config ./config/webpack.prod.config.js”
serve值改为“webpack serve --config ./config/webpack.dev.config.js“
npm install webpack-merge
新建文件夹config
新建文件webpack.prod.config.js
const {cleanWebpackPlugin}=require("clean-webpack-plugin") const copyWebpackPlugin = require("copy-webpack-plugin") const {merge} =require("webpack-merge") const commonConfig= require("./config/webpack.common.config.js") module.exports=merge(commonConfig,{ mode:"production", plugins: [ new CleanWebpackPlugin(), new CopyWebpackPlugin({ patterns: [ { from: ' "public" , to: "./", glob0ptions: { ignore: [ "**/ index . html" ]} } ] })) ]
新建文件webpack.dev.config.js
module.exports={ mode:"development", devtool:"source-map", devserver:{ contantBase:"./abc", hot:true, open:true, host: port:7777 proxy:{ "/api":"http://localhost:8888" } } }
新建文件webpack.common.js
module.exports={ 公共的一些配置留在这个文件里 }
到此,关于“vue devserver如何配置”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。