最近解除了一個老項目，不是通過腳手架搭建的vue項目辞州，所以需要手動配置打包環(huán)境
這是原創(chuàng)作者的鏈接，分享給大家:
https://blog.csdn.net/qq_19924321/article/details/109293984
vue打包時使用不同的環(huán)境變量
同一個項目通過打包使用不同的環(huán)境變量，目前的環(huán)境有三個：
一崭孤、本地------開發(fā)環(huán)境
二、線上------測試環(huán)境
三嗤形、線上------正式環(huán)境
我們都知道vue默認的打包都是生產(chǎn)模式派殷，所以說打包后的都是線上的東西拓轻，現(xiàn)在我們解決一下如何通過不同命令的打包方式使用不同的環(huán)境變量勿锅。
安裝cross-env
npm install cross-env --save-dev
config目錄,新增test.env.js垮刹，文件目錄如下
- config
- index.js
- dev.env.js
- prod.env.js
- test.env.js
修改 prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
EVN_CONFIG:'"prod"',
TITLE:'"正式環(huán)境title"',
}
修改 dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
EVN_CONFIG:'"dev"',
TITLE:'"開發(fā)環(huán)境title"',
})
修改 test.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
EVN_CONFIG:'"test"',
TITLE:'"測試環(huán)境title"',
}
修改config/index.js,修改build那一部分的代碼吞鸭，其他不變
build: {
// 添加test遮咖、prod環(huán)境變量配置
prodEnv: require('./prod.env'),
testEnv: require('./test.env'),
//如果需要通過打包不同的環(huán)境變量漓藕，打包到不同的文件夾可以這樣寫,注意用了此處代碼需要注釋點下面的index和assetsRoot這兩個配置
// index: path.resolve(__dirname, '../' + process.env.EVN_CONFIG + '_dist/index.html'),
// assetsRoot: path.resolve(__dirname, '../' + process.env.EVN_CONFIG + '_dist'),
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// 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
}
修改build/build.js,注釋process.env.NODE_ENV = 'production然后修改spinner嫩与。
'use strict'
require('./check-versions')()
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.EVN_CONFIG+ ' mode...' )
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
修改build/webpack.prod.conf.js,注釋const env = require('../config/prod.env') 新增如下代碼
const env = config.build[process.env.EVN_CONFIG+'Env']
修改package.json,build:test打包測試環(huán)境根资，build:prod打包正式環(huán)境
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:test": "cross-env NODE_ENV=production EVN_CONFIG=test node build/build.js",
"build:prod": "cross-env NODE_ENV=production EVN_CONFIG=prod node build/build.js"
},
運行打包命令即可，如果需要輸出到不同的目錄可以參考上面修改config/index.js這一塊的代碼
測試環(huán)境：npm run build:test
正式環(huán)境：npm run build:prod
最后部署到線上，可以通過在頁面上打印process.env是否在不同的環(huán)境使用了不同的環(huán)境變量锡移，如果按我的步驟寫基本上是不會出問題的。有問題下方留言。
為了方便大家測試，可以打包后這樣子做。
#如果沒有安裝live-server,可以先安裝
npm install -g live-server
#然后進入你打包的那個文件夾默認是dist,打開命令行
live-server
會自動啟動服務欢唾，然后就能直接看到效果
以上就是vue分別打包測試環(huán)境和正式環(huán)境的方法了
如果這篇文章對你有幫助肩刃，或者在進行中遇到其他問題沸呐，歡迎評論區(qū)留言出來崭添。
我們一起探討~
