返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vuedevserver及其配置方法
  • 801
分享到

vuedevserver及其配置方法

vuedevserver及其配置vuedevserver配置 2022-12-20 18:12:31 801人浏览 独家记忆
摘要

目录一、devserver背景二、webpack-dev-server三、对devserver进行一些配置:四、模块热替换HMR五、跨域访问问题:六、WEBpack的resolve:

一、devserver背景

每次改代码都需要重新部署,
或者只改变修改代码行的效果
所以出现了devserver本地服务
为了完成自动编译,webpack提供了几种可选的模式
方式一:webpack watch mode

  • 实现方法一: 在导出的配置中,添加watch:true
  • 实现方法二: 在启动webpack的命令中,添加–watch的标识

方式二:webpack-dev-server(常用)

二、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框架发起服务。那样会降低效率

三、对devserver进行一些配置:

在webpack.config.js中,写上

devServer:{
  contantBase:"./abc"
}

如果index.html里<script. src=“./aaa.js”>, 打包时会去找abc/aaa.js,这就是contantBase的作用,可以理解为去源代码里找文件,一般值是"./public"
因为webpack.config.js中配置了webcopyPlugin,如果没有配置,那么就不会
拷贝图片等静态文件,这时候就需要去public文件夹中寻找。

一般开发阶段使用contantBase
一般打包阶段(上传服务器)使用copyplugin

四、模块热替换HMR

应用程序在运行过程中,替换,添加,删除模块都会重新刷新整个页面,拿计数器案例为例:
加到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
}

六、webpack的resolve:

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及其配置的文章就介绍到这了,更多相关vue devserver配置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vuedevserver及其配置方法

本文链接: https://lsjlt.com/news/175380.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vuedevserver及其配置方法
    目录一、devserver背景二、webpack-dev-server三、对devserver进行一些配置:四、模块热替换HMR五、跨域访问问题:六、webpack的resolve:...
    99+
    2022-12-20
    vue devserver及其配置 vue devserver配置
  • Log4j properties的配置及其使用方法
    这篇文章主要讲解了“Log4j properties的配置及其使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Log4j properties的配置及其使用方法”吧!目录一、log4j...
    99+
    2023-06-20
  • Oracle主目录的重要性及其配置方法
    标题:Oracle主目录的重要性及其配置方法 在Oracle数据库中,主目录(Oracle home)扮演着非常重要的角色。主目录是指安装Oracle软件的根目录,包含了数据库引擎、客...
    99+
    2024-03-07
    oracle 配置 目录
  • Log4j.properties配置及其使用
    目录一、log4j简介1、Loggers2、Appenders3、Layouts二、配置详解1、配置根Logger:2、配置日志信息输出目的地(appender):2.1Consol...
    99+
    2024-04-02
  • Spring Boot多数据源及其事务管理配置方法
    准备工作先给我们的项目添加Spring-JDBC依赖和需要访问数据库的驱动依赖。配置文件spring.datasource.prod.driverClassName=com.mysql.jdbc.Driverspring.datasourc...
    99+
    2023-05-31
    spring boot 多数据源
  • VMWare网络配置的常见报错及其解决方法
    VMWare网络配置的常见报错及其解决方法 文章目录 网络配置1. 首先查看我们电脑的IP地址.2. 编辑网络编辑器3. 修改本地电脑的VMnet8的IP4. 更改虚拟机网卡设置 网络设置的常见错误及解决...
    99+
    2023-08-23
    网络 服务器 linux
  • Spark的安装及其配置
    1.Spark下载 https://archive.apache.org/dist/spark/   2.上传解压,配置环境变量 配置bin目录 解压:tar -zxvf spark-2.4.5-bin-hadoop2.7.tgz -C...
    99+
    2018-09-29
    Spark的安装及其配置
  • MySQL 复制部署及其配置
      为 MySQL 服务器配置复制非常简单。但由于场景不同,基本的步骤还是有所差异。最基本的场景是新安装主库和备库,总得来说分为以下几步: 1️⃣在每台服务器上创建复制账号。 2️⃣配置主库和备库。 3️⃣通知备库连接到主库并从...
    99+
    2016-05-10
    MySQL 复制部署及其配置
  • PHP及PDO的配置方法
    这篇文章主要讲解了“PHP及PDO的配置方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“PHP及PDO的配置方法”吧!1 DM PHP及PDO配置方法1....
    99+
    2024-04-02
  • GoFrame gredis配置文件及配置方法对比
    目录前言摘要GoFrame gredis配置文件(推荐)使用示例:打印结果配置方法(高级)使用示例:总结前言摘要 上一篇文章为大家介绍了 GoFrame gcache使用实践 | 缓存控制 淘汰策略 ,得到了大家积极的反...
    99+
    2022-06-13
    GoFrame gredis配置文件方法 GoFrame gredis配置
  • MongoDB常用配置及维护方法
    本篇内容介绍了“MongoDB常用配置及维护方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!配置:常用配...
    99+
    2024-04-02
  • SpringBoot+redis配置及测试的方法
    1.创建项目时选择redis依赖 2.修改配置文件,使用SpringBoot就避免了之前很多的xml文件 2.1学过redis的同学都知道这个东西有集群版也有单机版,无论哪个版本...
    99+
    2024-04-02
  • SpringcloudGateway简介及相关配置方法
    目录Spring Cloud Gateway 的核心功能:1、路由 Route:2、断言 Predicate:3、过滤器 filter:4、Predicate 断言条件(转发规则)介...
    99+
    2023-05-14
    Spring cloud Gateway配置 Spring cloud Gateway
  • vue使用vite配置跨域及环境配置的方法
    这篇文章主要介绍“vue使用vite配置跨域及环境配置的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue使用vite配置跨域及环境配置的方法”文章能帮助大家解决问题。如何配置跨域,代理域名不...
    99+
    2023-07-02
  • 阿里云数据库服务器IP地址的重要性及其配置方法
    ## 在使用阿里云数据库时,了解和配置正确的数据库服务器IP地址是非常重要的。本文将介绍阿里云数据库服务器IP地址的定义和作用,并提供详细的配置方法,帮助用户正确地设置和管理阿里云数据库服务器的IP地址。1. 什么是阿里云数据库服务器IP...
    99+
    2023-12-26
    阿里 重要性 地址
  • 阿里云服务器配置文件的位置及配置方法
    在使用阿里云服务器时,了解配置文件的位置和配置方法是非常重要的。本文将详细介绍阿里云服务器配置文件的存放位置以及如何进行配置。 阿里云服务器配置文件的位置阿里云服务器上的配置文件通常位于以下目录中:/etc:这是系统级别的配置文件目录,包含...
    99+
    2024-01-20
    阿里 配置文件 位置
  • Linux下Docker及portainer相关配置方法
    一、安装使用Docer CE 本文以CentOS 7为例,安装docker CE版本,docker有两种版本,社区版本CE和企业版本EE,此处学习研究以CE版本为例, 两种安装方式可选:1、使用yum安装,2、使用脚本自...
    99+
    2022-06-04
    linux docker linux portainer配置
  • Django路径配置及渲染的方法
    这篇文章主要介绍“Django路径配置及渲染的方法”,在日常操作中,相信很多人在Django路径配置及渲染的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Django路径...
    99+
    2024-04-02
  • SpringBoot整合JPA方法及配置解析
    目录JPA与Hibernate及Spring Data JPA的关系整合JPApom.xmlapplication.ymlPerson实体类PersonRepository接口Tes...
    99+
    2023-05-20
    Springboot整合JPA SpringBoot整合Java Persistence API
  • nginx限流及配置管理的方法
    这篇文章主要介绍“nginx限流及配置管理的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nginx限流及配置管理的方法”文章能帮助大家解决问题。nginx限流http { ...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作