前端打包踩坑

现在觉得这个有用，先暂时这样理解，后续再进行修改

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打包

1. 配置打包文件名，和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': '' }
            }
        }
    },
}

2. 在目录下 .env.development 文件中

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

3. 在目录下 新建文件.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

4. 在src/utils/request.js文件中设置调用接口的地址

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    timeout: 500000000 // request timeout
})

5. 在package.json问价里面进行配置，就可以使用了

"formal": "vue-cli-service serve --mode formal",
"build:formal": "vue-cli-service build --mode formal",