vue-cli 脚手架 config 目录下 index.js 配置文件
- // see http://vuejs-templates.github.io/webpack for documentation.
- // path 是 node.js 的路径模块, 用来处理路径统一的问题
- var path = require('path')
- module.exports = {
- // 下面是 build 也就是生产编译环境下的一些配置
- build: {
- // 导入 prod.env.js 配置文件, 只要用来指定当前环境, 详细见 (1)
- env: require('./prod.env'),
- // 下面是相对路径的拼接, 假如当前跟目录是 config, 那么下面配置的 index 属性的属性值就是 dist/index.html
- index: path.resolve(__dirname, '../dist/index.html'),
- // 下面定义的是静态资源的根目录 也就是 dist 目录
- assetsRoot: path.resolve(__dirname, '../dist'),
- // 下面定义的是静态资源根目录的子目录 static, 也就是 dist 目录下面的 static
- assetsSubDirectory: 'static',
- // 下面定义的是静态资源的公开路径, 也就是真正的引用路径
- assetsPublicPath: '/',
- // 下面定义是否生成生产环境的 sourcmap,sourcmap 是用来 debug 编译后文件的, 通过映射到编译前文件来实现
- 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
- // 下面是是否在生产环境中压缩代码, 如果要压缩必须安装 compression-webpack-plugin
- productionGzip: false,
- // 下面定义要压缩哪些类型的文件
- 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
- // 下面是用来开启编译完成后的报告, 可以通过设置值为 true 和 false 来开启或关闭
- // 下面的 process.env.npm_config_report 表示定义的一个 npm_config_report 环境变量, 可以自行设置
- bundleAnalyzerReport: process.env.npm_config_report
- },
- dev: {
- // 引入当前目录下的 dev.env.js, 用来指明开发环境, 详见 (2)
- env: require('./dev.env'),
- // 下面是 dev-server 的端口号, 可以自行更改
- port: 8080,
- // 下面表示是否自定代开浏览器
- autoOpenBrowser: true,
- assetsSubDirectory: 'static',
- assetsPublicPath: '/',
- // 下面是代理表, 作用是用来, 建一个虚拟 api 服务器用来代理本机的请求, 只能用于开发模式
- // 详见 (3)
- 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.
- // 是否生成 css,map 文件, 上面这段英文就是说使用这个 cssmap 可能存在问题, 但是按照经验, 问题不大, 可以使用
- // 给人觉得没必要用这个, css 出了问题, 直接控制台不就完事了
- cssSourceMap: false
- }
- }
来源: http://www.bubuko.com/infodetail-2735217.html