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"' };
内容版权声明:除非注明,否则皆为本站原创文章。