// see for documentation. var path = require('path') module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', // assetsPublicPath: './', assetsPublicPath: '', //公共资源路径 productionSourceMap: false, // 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, 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 }, fev: { env: require('./test.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', //公共资源路径 productionSourceMap: false, // 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, 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 }, test: { env: require('./test.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: false, // 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, 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 }, dev: { env: require('./dev.env'), port: 8081, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: 'https://www.jb51.net/', proxyTable: { // '/api':{ // target:'http://jsonplaceholder.typicode.com', // changeOrigin:true, // pathRewrite:{ // '/api':'' // } // } }, // 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 } }
4、在main.js文件中在增加环境变量判断
if(process.env.NODE_ENV == 'production'){ defines.html_url = '正式环境URL'; } if(process.env.NODE_ENV == 'development'){ defines.html_url = '开发环境URL'; } if(process.env.NODE_ENV == 'fev'){ defines.html_url = '测试环境URL'; }
5、如果公共资源路径，在不同环境中需要更改。在webpack.base.conf.js 中配置打包文件输出的公共路径。
var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') //增加文件路径判断 var webpack_public_path = ''; if(process.env.NODE_ENV === 'production'){ webpack_public_path = config.build.assetsPublicPath; }else if(process.env.NODE_ENV === 'fev'){ webpack_public_path = config.fev.assetsPublicPath; }else if(process.env.NODE_ENV === 'dev'){ webpack_public_path = config.dev.assetsPublicPath; } function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { //测试使用 entry: { app: ["promise-polyfill", "./src/main.js"] }, // entry: { // app: './src/main.js' // }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: webpack_public_path // publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'fev' ? config.build.assetsPublicPath // : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], modules: [ resolve('src'), resolve('node_modules'), ], alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), 'vendor': path.resolve(__dirname, '../src/api'), // 'vendor': path.resolve(__dirname, '../src/vendor'), } }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } }