web前端|js教程
vue-cli,webpack,web
web前端-js教程这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作，待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好。本人是一名后端开发人员，接触前端时间不长，这里有说的不好的地方，还请大家评论建议下。
在线课堂 源码,vscode调试什么意思,ubuntu 16壁纸,优化tomcat启动速度,爬虫python拉勾,细说php分页类,河南贴心seo优化创新服务,单页的网站源码怎么做成多级页面,柚子皮wp模板破解版lzw
1. 安装必要的环境准备
电器公司网站源码(asp access),vscode点击代码跳转页面,ubuntu中有pip,计算机tomcat,爬虫实战教材,php 下载中文名文件,重庆百度seo排名课程,wordpress可以做电影网站吗,dedecms如何换模板lzw
首先我们要能够暗转node.js,这个环境。百度搜索node，进入官网根据自己的操作系统进行下载即可。现在的版本都是自带npm的了。所以安装后，环境变量正常情况下会自动配置，开启一个命令行终端，输入node，npm，就可以看到相应的信息。那么说明安装成功。
招商加盟源码,vscode 谷歌显示器,ubuntu手册教程,往tomcat部署包,黑色爬虫名称,php获取网站路径,长沙seo全网推广营销软件,最新同城网站源码,专题学习网站模板lzw
2. cnpm
由于我们在国内，所以npm的下载路径对我们来说是很慢的，因此我们要使用淘宝提供的cnpm镜像（与maven镜像是一个效果。）百度搜索cnpm，点击进行官网，里面的教学很详细，这里也不会啰嗦了。
3. 正式搭建vue-cli
我们首先进行vue-cli的一个下载：
cnpm install -g vue-cli
里面会跟着将webpack一起下载下来，如果没有，那么我们也可以手动自己下载一下webpack就好了，命令相同，只是把vue-cli换成webpack。
下载好之后，进入一个合适的目录，然后输入：
vue-cli webpack vuedemo1
webpack参数是指：我们使用webpack的这套模板
Vuedemo1指：我们在此目录下新建一个名字叫做vuedemo1的目录并将其作为项目的跟目录。
这样，一个空的vue-cli项目就搭建好了
测试一下，输入：
npm run dev
默认开启8080端口，并打开默认浏览器，看到一个熟悉的vue的页面。
4. 配置文件讲解
本身对配置文件理解的并不是特别深刻，这里将自己了解的一些配置含义写出来，共同学习一下。
bulid目录下面的webpack.base.config.js：这里一般是一些基础信息的配置，用过webpack的小伙伴应该都比较熟悉，这里简单讲解一下各个属性：
input：代表入口文件，这里一般指定的是index.html
output：出口文件。
module：这里一般写的的针对各个文件的配置的解析loader。
resolve：这里指其他配置，里面一般有：alias：起别名，例如：
alias: { ‘vue$: ‘vue/dist/vue.esm.js, ‘@: resolve(‘src), ‘RegForm: ‘@/components/RegForm.vue //新增 }
我这里新增一个别名，代表一个路径，这样，以后要引入这个vue文件的时候，直接：
import Regfrom from “RegForm”就可以了。
前面加@，因为默认的配置中将@，取名为resolve（’src’）,解析了绝对路径。
build下面dev-server.js：
// 检查NodeJS和npm的版本require(./check-versions)()// 获取配置var config = require(../config)// 如果Node的环境变量中没有设置当前的环境（NODE_ENV），则使用config中的配置作为当前的环境if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)}// 一个可以调用默认软件打开网址、图片、文件等内容的插件// 这里用它来调用默认浏览器打开dev-server监听的端口，例如：localhost:8080var opn = require(opn)var path = require(path)var express = require(express)var webpack = require(webpack)// 一个express中间件，用于将http请求代理到其他服务器// 例：localhost:8080/api/xxx --> localhost:3000/api/xxx// 这里使用该插件可以将前端开发中涉及到的请求代理到API服务器上，方便与服务器对接var proxyMiddleware = require(http-proxy-middleware)// 根据 Node 环境来引入相应的 webpack 配置var webpackConfig = process.env.NODE_ENV === esting ? require(./webpack.prod.conf) : require(./webpack.dev.conf)// dev-server 监听的端口，默认为config.dev.port设置的端口，即8080var port = process.env.PORT || config.dev.port// 用于判断是否要自动打开浏览器的布尔变量，当配置文件中没有设置自动打开浏览器的时候其值为 falsevar autoOpenBrowser = !!config.dev.autoOpenBrowser// 定义 HTTP 代理表，代理到 API 服务器var proxyTable = config.dev.proxyTable// 创建1个 express 实例var app = express()// 根据webpack配置文件创建Compiler对象var compiler = webpack(webpackConfig)// webpack-dev-middleware使用compiler对象来对相应的文件进行编译和绑定// 编译绑定后将得到的产物存放在内存中而没有写进磁盘// 将这个中间件交给express使用之后即可访问这些编译后的产品文件var devMiddleware = require(webpack-dev-middleware)(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true})// webpack-hot-middleware，用于实现热重载功能的中间件var hotMiddleware = require(webpack-hot-middleware)(compiler, { log: () => {}})// 当html-webpack-plugin提交之后通过热重载中间件发布重载动作使得页面重载compiler.plugin(compilation, function (compilation) { compilation.plugin(html-webpack-plugin-after-emit, function (data, cb) { hotMiddleware.publish({ action: eload }) cb() })})// 将 proxyTable 中的代理请求配置挂在到express服务器上Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] // 格式化options，例如将\变成{ target: \ } if (typeof options === string) { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options))})// handle fallback for HTML5 history API// 重定向不存在的URL，常用于SPAapp.use(require(connect-history-api-fallback)())// serve webpack bundle output// 使用webpack开发中间件// 即将webpack编译后输出到内存中的文件资源挂到express服务器上app.use(devMiddleware)// enable hot-reload and state-preserving// compilation error display// 将热重载中间件挂在到express服务器上app.use(hotMiddleware)// serve pure static assets// 静态资源的路径var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)// 将静态资源挂到express服务器上app.use(staticPath, express.static(./static))// 应用的地址信息，例如：http://localhost:8080var uri = http://localhost: + port// webpack开发中间件合法（valid）之后输出提示语到控制台，表明服务器已启动devMiddleware.waitUntilValid(function () { console.log(> Listening at + uri + \ )})// 启动express服务器并监听相应的端口（8080）module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } // when env is testing, don need open it // 如果符合自动打开浏览器的条件，则通过opn插件调用系统默认浏览器打开对应的地址uri if (autoOpenBrowser && process.env.NODE_ENV !== esting) { opn(uri) }})
3.build/webpack.dev.conf.js (npm run dev用到的配置文件 )
var utils = require(./utils)var webpack = require(webpack)var config = require(../config)// 一个可以合并数组和对象的插件var merge = require(webpack-merge)var baseWebpackConfig = require(./webpack.base.conf)// 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件var HtmlWebpackPlugin = require(html-webpack-plugin)// 用于更友好地输出webpack的警告、错误等信息var FriendlyErrorsPlugin = require(friendly-errors-webpack-plugin)// add hot-reload related code to entry chunksObject.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = [./build/dev-client].concat(baseWebpackConfig.entry[name])})// 合并基础的webpack配置module.exports = merge(baseWebpackConfig, { // 配置样式文件的处理规则，使用styleLoaders module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // 配置Source Maps。在开发中使用cheap-module-eval-source-map更快 devtool: #cheap-module-eval-source-map, // 配置webpack插件 plugins: [ new webpack.DefinePlugin({ process.env: config.dev.env }), // /glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), // 后页面中的报错不会阻塞，但是会在编译结束后报错 new webpack.NoEmitOnErrorsPlugin(), // /ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: index.html, template: index.html, inject: true }), new FriendlyErrorsPlugin() ]})
4.build/build.js
// /shelljs/shelljs// 检查NodeJS和npm的版本require(./check-versions)()process.env.NODE_ENV = production// Elegant terminal spinnervar ora = require(ora)var path = require(path)// 用于在控制台输出带颜色字体的插件var chalk = require(chalk)// 执行Unix命令行的插件var shell = require(shelljs)var webpack = require(webpack)var config = require(../config)var webpackConfig = require(./webpack.prod.conf)var spinner = ora(uilding for production...)spinner.start() // 开启loading动画// 输出文件的目标文件夹var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)// 递归删除旧的目标文件夹shell.rm(-rf, assetsPath)// 重新创建文件夹 shell.mkdir(-p, assetsPath)shell.config.silent = true// 将static文件夹复制到输出的目标文件夹shell.cp(-R, static/*, assetsPath)shell.config.silent = false// webpack编译webpack(webpackConfig, function (err, stats) { spinner.stop() // 停止loading动画 if (err) throw err // 没有出错则输出相关信息 process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + \ \n) console.log(chalk.cyan( Build complete.\n)) console.log(chalk.yellow( Tip: built files are meant to be served over an HTTP server.\n + Opening index.html over file:// won\ work.\n ))})
5.build/webpack.prod.conf.js （npm run build用到的配置文件）
var path = require(path)var utils = require(./utils)var webpack = require(webpack)var config = require(../config)var merge = require(webpack-merge)var baseWebpackConfig = require(./webpack.base.conf)var HtmlWebpackPlugin = require(html-webpack-plugin)// 用于从webpack生成的bundle中提取文本到特定文件中的插件// 可以抽取出css，js文件将其与webpack输出的bundle分离var ExtractTextPlugin = require(extract-text-webpack-plugin)var env = process.env.NODE_ENV === esting ? require(../config/test.env) : config.build.env// 合并基础的webpack配置var webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? #source-map : false, // 配置webpack的输出 output: { // 编译输出目录 path: config.build.assetsRoot, // 编译输出文件名格式 filename: utils.assetsPath(js/[name].[chunkhash].js), // 没有指定输出名的文件输出的文件名格式 chunkFilename: utils.assetsPath(js/[id].[chunkhash].js) }, // 配置webpack插件 plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ process.env: env }), // 丑化压缩代码 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true }), // 抽离css文件 new ExtractTextPlugin({ filename: utils.assetsPath(css/[name].[contenthash].css) }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see /ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === esting ? index.html : config.build.index, template: index.html, inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // /kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: dependency }), // split vendor js into its own file new monsChunkPlugin({ name: vendor, minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, ../node_modules)) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new monsChunkPlugin({ name: manifest, chunks: [vendor] }) ]})// gzip模式下需要引入compression插件进行压缩if (config.build.productionGzip) { var CompressionWebpackPlugin = require(compression-webpack-plugin) webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: [path].gz[query], algorithm: gzip, test: new RegExp( \\.( + config.build.productionGzipExtensions.join(|) + )$ ), threshold: 10240, minRatio: 0.8 }) )}if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require(webpack-bundle-analyzer).BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin())}module.exports = webpackConfig
6.config/index.js
// see http://vuejs-templates.github.io/webpack for documentation.var path = require(path)module.exports = { // 构建产品时使用的配置 build: { // webpack的编译环境 env: require(./prod.env), // 编译输入的index.html文件 index: path.resolve(__dirname, ../dist/index.html), // webpack输出的目标文件夹路径 assetsRoot: path.resolve(__dirname, ../dist), // webpack编译输出的二级文件夹 assetsSubDirectory: static, // webpack编译输出的发布路径 assetsPublicPath: /, // 使用SourceMap productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin // 默认不打开开启gzip模式 productionGzip: false, // gzip模式下需要压缩的文件的扩展名 productionGzipExtensions: [js, css], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }, // 开发过程中使用的配置 dev: { // webpack的编译环境 env: require(./dev.env), // dev-server监听的端口 port: 8080, // 启动dev-server之后自动打开浏览器 autoOpenBrowser: true, // webpack编译输出的二级文件夹 assetsSubDirectory: static, // webpack编译输出的发布路径 assetsPublicPath: /, // 请求代理表，在这里可以配置特定的请求代理到对应的API接口 // 例如将/api/xxx代理到/api/xxx proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. // 是否开启 cssSourceMap cssSourceMap: false }}
在使用npm run build进行webpack打包后，发布的项目可能会遇到图片等找不到的情况。
这里有一个万能解决办法：
1. 将config/index.js 里面的 assetsPublicPath:’/’ 改为assetsPublicPath:’./’
2. build/util.js里面的
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: vue-style-loader, publicPath:/ })
将其中的publicPath改为：publicPath：’../../’就可以了。这样打包出来的路径就是正确的了。
第一个是为了改变js中引入图片的路径，改为./ 就是指在当前路径，这个.代表的路径就是assetsRoot+assetsSubDictionary，我这里定位到dist/static/ ，加上图片前缀img，就可以找到了。
第二种是为了改变vue文件中使用style样式里面例如background:url(‘xxx’)，这样的路径，因为style最终变成css文件在dist/static/css里面，我们的图片放在dist/static/img中，那么加上../../变成dist目录下，默认的目录前缀是static，img是图片默认前缀，这样就可以定位到图片。
vue-cli构建的项目中请求代理与项目打包
vue-cli构建的项目中，生产模式下的打包路径、与生产模式下的请求代理简单示意
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
详解从买域名到使用pm2部署node.js项目全过程
vue.js的computed,filter,get,set的用法及区别详解
JavaScript满天星导航栏实现方法
