现在觉得这个有用,先暂时这样理解,后续再进行修改
1.vue2打包
1.1打包配置
1.在 build/build.formal.js中(没有该文件的话创建),更改
const webpackConfig = require('./webpack.prod.formal.conf')
2.在 build/webpack.dev.formal.conf.js 中(没有该文件的话创建),更改
new webpack.DefinePlugin({
'process.env': require('../config/dev.formal.env')
}),
3.在 build/webpack.prod.formal.conf.js中(没有该文件的话创建),更改
const env = require('../config/dev.formal.env')
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
publicPath: '/dirc/'
},
4.在 config/dev.formal.env.js 中(没有该文件的话创建),更改
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"newFormal"',//
})
//process.env.NODE_ENV
//就可以获取到定义的值-newFormal,用来更改不同环境的接口地址
5.在 package.json 文件里面,最后进行操作
"dev:formal": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.formal.conf.js",
"build:formal": "node build/build.formal.js",
//最后一个定义的不需要加逗号
1.2打包文件名
在config/index.js
build: {
// Template for index.html
//更改此处
index: path.resolve(__dirname, '../dirc/index.html'),
//更改此处
assetsRoot: path.resolve(__dirname, '../dirc'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: false,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
2.在 build/webpack.prod.formal.conf.js中,更改
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
publicPath: '/dirc/'//更改此处
},
2.vue3打包
- 配置打包文件名,和development下的前端代理
module.exports = {
publicPath: './',
outputDir: 'dirc',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
proxy: {
'/dev-api': {
target: 'http://192.111.11.11:8080',
ws: true, // // 是否启用websockets
changeOrigin: true, // 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
// secure: false,
pathRewrite: { '^/dev-api': '' }
}
}
},
}
- 在目录下 .env.development 文件中
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
- 在目录下 新建文件.env.formal
NODE_ENV = formal
# just a flag
ENV = 'formal'
# base api
VUE_APP_BASE_API = ' http://10.111.111.11:8080'
#全局获取此处定义的ip地址
#process.env.VUE_APP_BASE_API
- 在src/utils/request.js文件中设置调用接口的地址
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
timeout: 500000000 // request timeout
})
- 在package.json问价里面进行配置,就可以使用了
"formal": "vue-cli-service serve --mode formal",
"build:formal": "vue-cli-service build --mode formal",