现在我认为这很有用。我暂时会这样理解，稍后再修改。

前端填料坑

• 1.vue2打包
• • 1.1打包配置
  • 1.2包文件名
• 2.vue3打包

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",