Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。vue-webpack-boilerplate,官方定义为:
full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.
目录结构:
├── README.md ├── build │ ├── build.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ └── main.js └── static
config 环境配置
config 配置文件用来配置 devServer 的相关设定,通过配置 NODE_ENV 来确定使用何种模式(开发、生产、测试或其他)
config |- index.js #配置文件 |- dev.env.js #开发模式 |- prod.env.js #生产模式
index.js
'use strict'
const path = require('path');
module.exports = {
dev: {
// 路径
assetsSubDirectory: 'static', // path:用来存放打包后文件的输出目录
assetsPublicPath: '/', // publicPath:指定资源文件引用的目录
proxyTable: {}, // 代理示例: proxy: [{context: ["/auth", "/api"],target: "http://localhost:3000",}]
// 开发服务器变量设置
host: 'localhost',
port: 8080,
autoOpenBrowser: true, // 自动打开浏览器devServer.open
errorOverlay: true, // 浏览器错误提示 devServer.overlay
notifyOnErrors: true, // 配合 friendly-errors-webpack-plugin
poll: true, // 使用文件系统(file system)获取文件改动的通知devServer.watchOptions
// source map
cssSourceMap: false, // develop 下不生成 sourceMap
devtool: 'eval-source-map' // 增强调试 可能的推荐值:eval, eval-source-map(推荐), cheap-eval-source-map, cheap-module-eval-source-map 详细:https://doc.webpack-china.org/configuration/devtool
},
build: {
// index模板文件
index: path.resolve(__dirname, '../dist/index.html'),
// 路径
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// bundleAnalyzerReport
bundleAnalyzerReport: process.env.npm_config_report,
// Gzip
productionGzip: false, // 默认 false
productionGzipExtensions: ['js', 'css'],
// source map
productionSourceMap: true, // production 下是生成 sourceMap
devtool: '#source-map' // devtool: 'source-map' ?
}
}
dev.env.js
'use strict'
const merge = require('webpack-merge');
const prodEnv = require('./prod.env');
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
});
prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"'
};
内容版权声明:除非注明,否则皆为本站原创文章。
