vue中的config目录下index.js解读

目录
  • vue的config目录下index.js
  • config中的 index.js配置项
  • 总结

vue的config目录下index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

// 用于处理路径统一的问题
const path = require('path')

module.exports = {
  // 开发环境的配置
  dev: {
    // Paths
    assetsSubDirectory: 'static',                   // 静态资源文件夹
    assetsPublicPath: '/',                          // 发布路径
    // 一般解决跨域请求api
    proxyTable: {
        '/api': {
            target: 'http://api.douban.com/v2',     // 目标url
            changeOrigin: true,                     // 是否跨域
            pathRewrite: {
                '^/api': ''                         // 可以使用 /api 等价于 http://api.douban.com/v2
            }
        }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080,                 // dev-server的端口号,可以自行更改
    autoOpenBrowser: false,     // 是否自定代开浏览器
    errorOverlay: true,         // 查询错误
    notifyOnErrors: true,       // 通知错误
    poll: false,                // poll轮询,webpack为我们提供devserver是可以监控文件改动的,有些情况下却不能工作,可以设置一个轮询解决

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',        // webpack用于方便调试的配置

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,       // devtool的配置当文件名插入新的hash导致清除缓存时是否生成source maps,默认为true

    cssSourceMap: true        // 是否开启cssSourceMap
  },
  // 生产编译环境下的一些配置
  build: {
    // 下面是相对路径的拼接
    index: path.resolve(__dirname, '../dist/index.html'),

    // 下面定义的是静态资源的根目录 也就是dist目录
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',          // 下面定义的是静态资源的公开路径,也就是真正的引用路径

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // 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
    productionGzip: false,                      // 是否在生产环境中压缩代码,如果要压缩必须安装compression-webpack-plugin
    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     // 是否开启打包后的分析报告
  }
}

config中的 index.js配置项

config中index.js文件是用来配置开发环境和生产环境的配置参数

index.js:

const path = require('path')
 
module.exports = {
  build: {       // production 环境
    env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
    index: path.resolve(__dirname, '../dist/index.html'),//编译输入的 index.html 文件, __dirname 是node的一个全局变量,获得当前文件所在目录的完整目录名
    assetsRoot: path.resolve(__dirname, '../dist'),// 编译输出的静态资源路径
    assetsSubDirectory: 'static',// 编译输出的二级目录
    assetsPublicPath: '/',// 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
    productionSourceMap: false,// 是否开启 cssSourceMap
    // 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
    productionGzip: false,// 是否开启 gzip
    productionGzipExtensions: ['js', 'css'],// 需要使用 gzip 压缩的文件扩展名
    // 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: {// dev 环境
    env: require('./dev.env'),// 使用 config/dev.env.js 中定义的编译环境
    port: process.env.PORT || 8080,// 运行测试页面的端口
    autoOpenBrowser: true,//自动打开浏览器
    assetsSubDirectory: 'static',// 编译输出的二级目录
    assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
    proxyTable: {}, // 需要 proxyTable 代理的接口(可跨域)
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false // 是否开启 cssSourceMap
  }
}

config/prod.env.js :

module.exports = {
  NODE_ENV: '"production"'
}

config/dev.env.js

onst merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

关于cssSourceMap的作用是,随着代码增多,我们需要对代码进行压缩。

代码压缩后进行调bug定位将非常困难,于是引入sourcemap记录压缩前后的位置信息记录,当产生错误时直接定位到未压缩前的位置,将大大的方便我们调试。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue前端vue.config.js简介

    目录 vue.config.js publicPath outputDir assetsDir devServer process.env.VUE_APP_BASE_API PS:vue.config.js详解 vue.config.js vue项目的配置文件,需要严格遵照 JSON 的格式来写.结构如下: module.exports = { // 选项... } publicPath 部署应用包时的基本 URL.例如 https://www.my-app.com/,则publicPath则为

  • Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决

    目录 webpack.config.js文件没有的原因 手动创建一个 vue.config.js 没有配置vue.config.js之前,打包后的文件如下 配置后 总结 webpack.config.js文件没有的原因 Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js. vue-cli3 之后创建的时候并不会自动创建 vue.config.js,因为这个是个可选项,所以一般都是需要修改 webpack 的时候才会自己创建一个 vue

  • vue-cli脚手架config目录下index.js配置文件的方法

    此文章介绍vue-cli脚手架config目录下index.js配置文件 1.此配置文件是用来定义开发环境和生产环境中所需要的参数 2.关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 3.上代码 // see http://vuejs-templates.github.io/webpack for documentation. // path是node.js的路径模块,用来处理路径统一的问题 var path = require('path')

  • vue中的config目录下index.js解读

    目录 vue的config目录下index.js config中的 index.js配置项 总结 vue的config目录下index.js 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. // 用于处理路径统一的问题 const path = require('path') module.exports = { // 开发环境的配

  • vue-cli脚手架build目录下utils.js工具配置文件详解

    此文章用来解释vue-cli脚手架build目录中的utils.js配置文件 1.此配置文件是vue开发环境的wepack相关配置文件,主要用来处理css-loader和vue-style-loader 2.关于注释 •当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 3.上代码 // 引入nodejs路径模块 var path = require('path') // 引入config目录下的index.js配置文件 var config = requir

  • 简述vue中的config配置

    在webpack.base.conf文件中配置别名以及扩展名 resolve: { extensions: ['.js', '.vue', '.json', '.styl'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'src': path.resolve(__dirname, '../src'), 'common': path.resolve(__dirname, '../src/common'), 'compo

  • Vue 中为什么不推荐用index 做 key属性值

    目录 前言 key 的作用 key 在 diff 算法中的角色 同步头部节点 同步尾部节点 添加新的节点 删除多余节点 最长递增子序列 为什么不要用 index 性能消耗 数据错位 解决方案 总结 前言 前端开发中,只要涉及到列表渲染,那么无论是 React 还是 Vue 框架,都会提示或要求每个列表项使用唯一的 key,那很多开发者就会直接使用数组的 index 作为 key 的值,而并不知道 key 的原理.那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key

  • python shell命令行中import多层目录下的模块操作

    首先在文件夹中添加_init_.py文件,即使是空文件也可以,多层文件夹,每层文件夹中都要添加. 比如我要import,a文件夹中,b文件夹下的 c.py 我就需要在a,b文件夹中都添加_init_.py文件. 然后引入方式:import a.b.c 然后在调用c.py的函数时,直接c.f()是不行的,需要a.b.c.f(). 当然也可以先写 c = a.b.c,然后再c.f(). 补充知识:Python IDLE shell中引入模块 安装了Python之后,会自带一个Python IDLE,

  • 基于android中读取assets目录下a.txt文件并进行解析的深入分析

    android读取assets文件下的内容,一般都是使用getAsset.open()方法,并将文件的路径作为参数传入,而当我们解析一个目录下的文件时需要对其进行解析时,比如:a.txt文件的内容为:nameandroid,liuclass1,2,3,4这些文件有时就像是数据库文件的格式一样,我们就需要对其进行解析.我们知道获取assets文件后返回的是一个inputstream而不是一个file类型,所以我们需要对inputstream进行解析.主要分为两个阶段:第一个阶段为:去换行符,第二个

  • vue中的for循环以及自定义指令解读

    目录 vue for循环及自定义指令 v-for 自定义指令 vue自定义指令动态参数 通过自定义指令中的修饰符的key作为值,更改显示的颜色 vue for循环及自定义指令 v-for 1.v-for用来循环的数组怎么发生变化可以被vue检测到: push.pop.shift.unshift.splice.sort.reverse等方法可以被检测到 vue对于这些方法的处理是重写了这些方法,并在最后会触发一次notify方法来通知这个array已经发生变化 vue还增加了两个方法来观测arra

  • Vue中axios的封装(报错、鉴权、跳转、拦截、提示)

    统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 实现的功能 统一捕获接口报错 : 用的axios内置的拦截器 弹窗提示: 引入 Element UI 的 Message 组件 报错重定向: 路由钩子 基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子 表单序列化: 我这边直接用 qs (npm模块),你有时间也可以自己写 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道 // 可以去了解npm的引入和es6引入

  • 在Vue中使用mockjs代码实例

    前言 前后端分离的开发模式,前端需要向后端请求数据(ajax请求),但实际开发过程中,前后端会约定一份接口文档,但前后端开发进度并不一致,当后端没有完善接口功能时,前端需要在本地模拟数据返回,此时需要使用到mockjs. 安装 npm install mockjs --save-dev 目录结构 配置 1.api下的config.js:配置axios的拦截处理 import axios from 'axios' // 创建一个axios实例 const service = axios.creat

随机推荐