新版本webpack生成的dev.server.js 在webpack.dev.conf.js中webpack.dev.conf.jsconst axios = require(‘axios‘)
const express = require(‘express‘)
const app = express()
const apiRoutes = express.Router()
app.use(‘/api‘, apiRoutes)然后找到devserver 这里可以配置路由devServer: {before (app) {app.get(‘/api/getDiscList‘, function (req, res) {res.json})},
原文：https://www.cnblogs.com/luxiaoyao/p/8733...
//饿了么官网https://element.eleme.cn/#/zh-CN/component/layouthttps://cn.vuejs.org/v2/guide/class-and-style.html基于Nodejs+Vue+Webpack的前端开发指导安装nodejs，上官网（https://nodejs.org/en/），根据OS系统版本下载。直接安装。安装过程，直接点击“”Next“”。 （安装完毕，会自动添加 X:/program/nodejs目录到环境变量path中）检查： 输入 node -v，是否正常返回nodejs版本信息 输入 npm -v, 是否返回n...
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)从上面一系列的webpack配置的学习，我们现在来使用webpack来搭建vue的开发环境。首先我们来设想下我们的项目的目录结构如下：### 目录结构如下：
demo1 # 工程名
| |--- dist # 打包后生成的目录文件
| |--- node_modules # 所有的依赖包
| |--- app
| |...
在开始写webpack.base.conf.js（简称base）之前，我们先来看一下vue-loader.conf.js这个文件，毕竟在base中我们还会用到：‘use strict‘//引入前一篇文章的utils文件
const utils = require(‘./utils‘)
//引入config文件
const config = require(‘../config‘)
//判断当前是否为生产环境，如果是则返回true
const isProduction = process.env.NODE_ENV === ‘production‘
//是否使用sourceMap，如果是生产环境就使用config文件...
当我们需要和后台分离部署的时候，必须配置config/index.js:用vue-cli 自动构建的目录里面 （环境变量及其基本变量的配置）var path = require(‘path‘)module.exports = {build: {index: path.resolve(__dirname, ‘dist/index.html‘),assetsRoot: path.resolve(__dirname, ‘dist‘),assetsSubDirectory: ‘static‘,assetsPublicPath: ‘/‘,productionSourceMap: true},dev: {port: 8080,proxyTable: {}}
}在‘build‘部分，...
本文重点介绍Vue单页面应用的优化手段：异步加载面切换时加loading特效点击延迟inline manifest逻辑代码优化依赖包体积优化cdn引用Vue代码优化异步加载所谓的异步加载组件，其实就是组件懒加载。可以理解为：当我需要使用组件的时候才进行加载。主要包含两部分：路由配置和子组件的调用。所以在router文件夹下 index.js 做如下配置组件优化由于是后台项目，所以选择element-ui框架进行后台系统搭建，所以对这个进行优化也可以减小体...
问题描述：前端需要修改restful API的url，但是打包之后，配置文件找不到了，如果在npm run build 生成dist后，这个配置也被写死了，传到运行的前端服务器上后，假设某次，api服务器的ip修改了，改动只是更新下这个url，但是却需要会到前端源码，url后，在重新npm run build,然后再把整个dist再重新传到前端服务器，才可以。解决方法：用了generate-asset-webpack-plugin 这个插件，在webpack.prod.conf.js中去生成configServer.js...
配置webpacknpm i init --y
npm i webpack -D
npm i webpack-cli -D
npm i @types/firefox-webext-browser @types/chrome -D // 浏览器扩展API提示
支持 Typescripttsc --init
npm i typescript ts-loader -D
设置tsconfig.json配置文件{"compilerOptions": {"target": "ES2016","module": "commonjs", // ts-node 不支持 commonjs 以外的任何模块语法"allowJs": true,"outDir": "./dist","rootDir": "./src","strict": true,"...
在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包,来回很是麻烦,今天网上翻看到一个很好的方法可以解决这个问题,也是由于对webpack工具不是很了解,其实这个工具已经提供了解决方案.参考网站:http://blog.csdn.net/gebitan505/article/details/58166055;在config文件夹里面有三个js文件...
整了两天才发现是前段时间创建修改HOSTS文件导致的找到目录C:\Windows\System32\drivers\etc
删除 HOSTS文件注意：删除的不是hosts.ics 删除的是HOSTS原文：https://www.cnblogs.com/ITwj-115/p/14775816.html
在家的闲暇时间来完善自己的前端知识。经过两三天的学习，按照webpack文档学习，vue文档学习，最后实现了两者结合的目标。webpack按照网站上guide的流程依次学习1、使用npm安装webpack2、设置输入文件，比如怎样引入css，images，fonts，data3、设置输出文件，比如可以根据自己的设置来决定输出脚本的名称，生成新的页面，在每次生成新页面之前先把旧的页面进行清理4、开发过程中，使用source maps来显示提示信息，方便开发者定位错...
npm init -y 初始化项目 //-y 为自动生成package.json，如果需要自行配置，去掉-y即可安装各种依赖项npm install --save vue 安装vue2.0npm install --save-dev webpack webpack-dev-server 安装webpack以及webpack测试服务器 //默认安装最新版2.x版本npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，一般的浏览器是不认识es6语法的，babel的作用是将es6的语法编译成浏览器认识的语法npm install...
新建一个目录创建Vue项目：cd ..
mkdir webpack-vue
cd webpack-vue安装Vuecnpm install vue保持之前的目录结构： 在Main.js中引用Vue组件：// 引入包的时候，像Java一样 使用import
import Vue from ‘vue‘
let application = new Vue({el : "#application",data : {name : "阿伟"}
});页面引用bundle.js文件：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="./dist/bundle.js"></script><title>Titl...
接着上篇写，我们删掉了模板原生的demo，导致项目不能运行。ok，让我们忘记demo，开始自己的目标----》用vue做一个单页面网站demo练手。如果不清楚单页面是什么，百度一下 知乎一下都行。看完也不明白，没关系 我们我们参观一下别人的单页面网站 http://bh-lay.com/无论我们怎么点（除非跳转到其他的网站）这个页面是不会有那种讨厌的加载图标 接下来上图（图片来源地：参考文档http://blog.csdn.net/u013063153/article/details/5...
【首先安装node.js】： 1. 从node.js官网下载并安装node，安装过程很简单。 2. npm 版本需要大于 3.0，如果低于此版本需要升级它：# 查看版本 npm -v2.3.0#升级 npm cnpm install npm -g3.基于node.js,利用淘宝npm镜像安装相关依赖。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（http://npm.taobao.org/） npm install -g cnpm --registry=https://registry.npm.taobao.org1完成之后，我们就可以用cnpm代替npm来安装依赖...
