vue config構成の詳細
3529 ワード
//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
}
}
(1) prod.env.js
module.exports = {
// , ,NODE_ENV , production
NODE_ENV: '"production"'
}
(2) dev.env.js
// webpack merge , , ,
var merge = require('webpack-merge')
// prod.env.js
var prodEnv = require('./prod.env')
// , NODE_ENV: '"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
(3) proxyTable
vue-cli http-proxy-middleware , api
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com', -> url
changeOrigin: true, ->
pathRewrite: {
'^/list': '/list' -> /list api.xxxxxxxx.com/list
}
}
}