vue2 多环境配置开发

config文件夹:
1.修改prod.env.js

module.exports = {
    NODE_ENV: '"production"',
    EVN_CONFIG: '"prod"',
    BASE_URL: '"正式站接口地址"'
}

2.添加test.env.js

module.exports = {
    NODE_ENV: '"test"',
    EVN_CONFIG: '"test"',
    BASE_URL: '"测试站的接口地址"',
}

3.修改dev.env.js

module.exports = merge(prodEnv, {
  	NODE_ENV: '"development"',
    EVN_CONFIG: '"dev"',
    BASE_URL: '"联调哪个后端就用哪个后端的地址"',
})

4.index.js

build: {
	// 添加下面三个属性
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    devEnv: require('./dev.env'),
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
  }

build文件夹:
5.build.js

//删除这个
// const spinner = ora('building for production...')
//添加这个
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()

6.webpack.base.conf.js

const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
// 添加此常量
const env=process.env.NODE_ENV
const CopyWebpackPlugin = require('copy-webpack-plugin');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}



module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    // app: './src/main.js'
      app: ["babel-polyfill", "./src/main.js"]
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    // 删除这段代码
    // publicPath: process.env.NODE_ENV === 'production'
    //   ? config.build.assetsPublicPath
    //   : config.dev.assetsPublicPath
    //改成这样
    publicPath: env === 'production' ? config.build.assetsPublicPath : (env === 'test' || env === 'development' ? config.build.assetsPublicPath : config.dev.assetsPublicPath)
  },
}

7.webpack.dev.conf.js

//定义一个常量env
const env = process.env.env_config
const ExtractTextPlugin = require('extract-text-webpack-plugin')
plugins: [
        new webpack.DefinePlugin({
            // 'process.env': require('../config/dev.env')
            //更改依赖地址
            'process.env': require('../config/' + env + '.env')
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
        new webpack.NoEmitOnErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        }),
        // copy custom static assets
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, '../static'),
                to: config.dev.assetsSubDirectory,
                ignore: ['.*']
            }
        ]),
        new ExtractTextPlugin({
            filename: utils.assetsPath('css/[name].[contenthash].css'),
            // set the following option to `true` if you want to extract CSS from
            // codesplit chunks into this main css file as well.
            // This will result in *all* of your app's CSS being loaded upfront.
            allChunks: false,
        })
    ]

8.webpack.prod.conf.js

// const env = require('../config/prod.env')
// 修改env
const env = config.build[process.env.env_config + 'Env']

9.package.json 配置对应启动和打包命令

// 可删除原有的启动打包命令,也可保留,命令可自行配置,不必按下列代码
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "dev-dev": "cross-env NODE_ENV=development env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev-test": "cross-env NODE_ENV=test env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev-prod": "cross-env NODE_ENV=production env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build-dev": "cross-env NODE_ENV=development env_config=dev node build/build.js",
    "build-test": "cross-env NODE_ENV=test env_config=test node build/build.js",
    "build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},

打印 process.env.NODE_ENV 测试下没问题就ok了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值