正文

vue教程(三十七)搭建本地服务器(代码片段)

_否极泰来_  _否极泰来_  2022-12-12  584

关键词：

Vue 教程(三十七)搭建本地服务器

搭建本地服务器

webpack 提供了一个可选的本地开发服务器,这个本地服务器基于 node.js 搭建,内部使用 express 框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

不过它是一个单独的模块,在 webpack 中使用之前需要先安装它。
安装模块

npm install --save-dev webpack-dev-server@2.9.3

修改 webpack.config.js 文件

// 导入Node中path常量
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");

module.exports = 
  entry: "./src/main.js",
  output: 
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    // publicPath: 'dist/'
  ,
  resolve: 
    // alias：别名
    alias: 
      vue$: "vue/dist/vue.esm.js",
    ,
  ,
  module: 
    rules: [
      
        test: /\\.css$/,
        /**
         * css-loader:只负责将css文件进行加载
         * style-loader:负责将样式添加到DOM中
         * 使用多个loader时,是从右向左
         */
        use: ["style-loader", "css-loader"],
      ,
      
        test: /\\.vue$/,
        use: ["vue-loader"],
      ,
    ],
  ,
  plugins: [
    new webpack.BannerPlugin(
      "Copyright 2002-2021 the original author or authors.Licensed under the Apache License, Version 2.0 (the 'License');"
    ),
    new HtmlWebpackPlugin(
      template: "index.html",
    ),
    new UglifyjsWebpackPlugin(),
  ],
  devServer: 
    // 为哪—个文件夹提供本地服务,默认是根文件夹,我们这里要写,/dist
    contentBase: "./dist",
    // 端口号
    port: 8080,
    // 页面实时刷新
    inline: true,
    // historyApiFallback:在SPA页面中,依赖HTML5的 history模式
  ,
;

配置 package.json

参数：

webpack-dev-server - - open 参数可以自动打开浏览器

webpack-dev-server - -open chrome 默认打开谷歌浏览器


  "name": "meet",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": 
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  ,
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "css-loader": "^2.0.2",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3"
  ,
  "dependencies": 
    "vue": "^2.5.21"

验证配置

 npm run dev

– 以上为《Vue 教程(三十七)搭建本地服务器》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

vue2.0学习—watch和computed对比（三十七）(代码片段)

【Vue2.0学习】—watch和computed对比（三十七）计算属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible 查看详情

云原生（三十七）|kubernetes篇之gitlab入门和安装(代码片段)

...--version 确定是否安装成功4、创建本地仓库5、也可以从服务器上克隆一个库6、创建一个分支，并推送到服务器7、Gitlab服务端，可查看已经推送的信息一、入门1、简介GitLab是一个用于仓库管查看详情

vue教程(三十二)webpack使用vue配置步骤(代码片段)

Vue教程(三十二)webpack使用vue配置步骤新建一个项目vue安装本地webpack初始化npm配置webpack.config.js文件npminstallwebpack@3.6.0--save-dev初始化npmnpminit安装vuenpminstallvue@2.5.21--save配置webpack.config.js文件//导入Node中path常量constp 查看详情

vue教程(三十九)vue-cli2脚手架安装(代码片段)

Vue教程(三十九)vue-cli2脚手架安装VueCLI介绍CI是Command-Lineinterface，翻译为命令行界面，但是俗称脚手架。VueCL是一个官方发布vue.js项目脚手架，使用vue-cli可以快速搭建vue开发环境以及对应的webpacki配置。安装NodeJS可以直... 查看详情

vue教程(三十九)vue-cli2脚手架安装(代码片段)

webpack配置篇（三十七）：git规范和changelog生成(代码片段)

说明玩转webpack学习笔记介绍良好的Gitcommit规范优势：加快CodeReview的流程根据GitCommit的元数据生成Changelog后续维护者可以知道Feature被修改的原因技术方案提交格式要求本地开发阶段增加precommit钩子安装huskynpminstallhusky--save-dev... 查看详情

vue教程(十七)父子组件(代码片段)

Vue教程(十七)父子组件父子组件父组件下挂载一个子组件，子组件下还可以有子子组件。代码实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible 查看详情

vue教程(三十三)引入.vue文件(代码片段)

Vue教程(三十三)引入.vue文件在src目录下创建vue目录，在vue目录下创建App.vue<template><div><h3class="title">title</h3><span><h4>编程语言</h4><div>PythonJavaAndr 查看详情

第三十七篇vue(代码片段)

为什么需要测试自动化测试能够预防无意引入的bug，并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的Vue应用。与任何应用一样，新的Vue应用可能会以多种... 查看详情

2018-08-24第三十六课(代码片段)

第三十六课非关系统型数据库-mangodb目录二十四mongodb介绍二十五mongodb安装二十六连接mongodb二十七mongodb用户管理二十八mongodb创建集合、数据管理二十九php的mongodb扩展三十php的mongo扩展三十一mongodb副本集介绍三十二mongodb副本集搭... 查看详情

vue教程(三十六)webpack之代码混淆插件uglifyjs(代码片段)

Vue教程(三十六)webpack之代码混淆插件UglifyjsUglifyjs插件，可以对js等文件进行压缩安装插件npminstalluglifyjs-webpack-plugin@1.1.1--save-dev修改webpack.config.js文件//导入Node中path常量constpath=require("path");constwe 查看详情

三十七数据库的安装与使用(代码片段)

一、数据库介绍1、数据库：数据库即存放数据的仓库，只不过这个仓库是在计算机存储设备上，而且数据是按一定的格式存放的2、MySQL：用于管理文件的一个软件(两个程序)只要是基于网络通信，底层都是socket！！！服务端-socke... 查看详情

vue教程(三十八)配置文件环境分离(代码片段)

Vue教程(三十八)配置文件环境分离修改配置文件在项目根目录下新建文件夹【build】，在该目录下新建三个文件分别为：【base.config.js】、【prod.config.js】【dev.config.js】base.config.js内容如下：//导入Node中path常量constpath... 查看详情

vue教程(三十八)配置文件环境分离(代码片段)

vue教程(三十)webpack图片文件处理(代码片段)

Vue教程(三十)webpack图片文件处理准备两张图片素材，在webpack项目新建image文件夹，将素材放置文件夹中下载安装loader命令：url-loader：npminstallurl-loader@1.1.2--save-devfile-loader：npminstallfile-loader@3. 查看详情

vue教程(三十五)webpack之html插件(代码片段)

Vue教程(三十五)webpack之HTML插件HtmIWebpack插件作用：将index.htm反文件打包到dst文件夹中,这个时候就可以使用HtmIWebpackPlugin插件自动生成—个index.htm文件可以指定模板来生成，将打包的s文件,自动通过script标签插入到body中安... 查看详情

vue教程(三十五)webpack之html插件(代码片段)

springcloudalibaba微服务实战三十七-oauth2自定义登录接口(代码片段)

...天更新文章的原因是粉丝提了个问题：如何实现Oauth2认证服务器自定义登录接口以及返回自定义格式？这里我给大家分享一个简单且实用的方法，既可以灵活定制登录参数也可以自行组装返回结果。实现方案我们知道，认证服务... 查看详情