思路:新建一个 process.env 变量。
把 webpack 配置放到 vue.config.js 里面。
如果根目录下没有该文件,新建。配置参考:https://cli.vuejs.org/zh/config/
vue.config.js 配置参考:
const webpack = require('webpack') const merge = require('webpack-merge') const env = process.env module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', productionSourceMap: false, configureWebpack: { output: { filename: '[hash].js' }, plugins: [ new webpack.DefinePlugin({ 'process.env': merge(env, { 'AJAX_URL': '"' + process.env.AJAX_URL + '"' // 新建 AJAX_URL 变量 }) }) ] } }
npm 命令加上
"scripts": { "dev:dev": "set AJAX_URL=dev&&npm run dev", "dev:test": "set AJAX_URL=testing&&npm run dev", "dev:pro": "set AJAX_URL=production&&npm run dev", "dev": "vue-cli-service serve", "build:dev": "set AJAX_URL=dev&&npm run build", "build:test": "set AJAX_URL=testing&&npm run build", "build:pro": "set AJAX_URL=production&&npm run build", "build": "vue-cli-service build" }
这样,就可以在代码里面使用 process.env.AJAX_URL 这个变量了。
可以把ajax请求的配置放到一个文件里面
let SITE_CONFIG if (process.env.AJAX_URL === 'production') { SITE_CONFIG = { // api接口请求地址 baseUrl: '//www.example.com/', // cdn地址 cdnUrl: '' } } else if (process.env.AJAX_URL === 'testing') { SITE_CONFIG = { // api接口请求地址 baseUrl: '//test.example.com/', // cdn地址 cdnUrl: '' } } else if (process.env.AJAX_URL === 'dev') { SITE_CONFIG = { // api接口请求地址 baseUrl: '//dev.example.com/', // cdn地址 cdnUrl: '' } } else { SITE_CONFIG = { // api接口请求地址 baseUrl: '/', // cdn地址 cdnUrl: '' } } export default SITE_CONFIG
以上。
只需运行对应命令就可以实现平台切换了。
仅限于windows平台。
。
。
。
如果要在Linux平台运行打包,还要继续修改。
在命令行里面 set 变量值不生效,需要改放到 .env 文件。参考:https://cli.vuejs.org/zh/guide/mode-and-env.html
在根目录下新建以下文件:
## .env.production 文件 NODE_ENV=production ## .env.production.dev 文件 NODE_ENV=production AJAX_URL=dev ## .env.production.pro 文件 NODE_ENV=production AJAX_URL=production ## .env.production.test 文件 NODE_ENV=production AJAX_URL=testing
npm 命令修改如下:
"scripts": { "dev:dev": "set AJAX_URL=dev&&npm run dev", "dev:test": "set AJAX_URL=testing&&npm run dev", "dev:pro": "set AJAX_URL=production&&npm run dev", "dev": "vue-cli-service serve", "build:dev": "vue-cli-service build --mode production.dev", "build:test": "vue-cli-service build --mode production.test", "build:pro": "vue-cli-service build --mode production.pro", "build": "vue-cli-service build" }
好了,这样就算在Jenkins 里面也能打包了。
以上。。。