Error in the access path of some files after vue2 packaging

as mentioned, there is an error in the access path of some files after vue2 packaging.
queries some reliable data, and after actual operation, files that were originally inaccessible (some static resources and a packaged xxxxxx.js) can be accessed, but others (such as another part of static resources and packaged yyyyyy.js) cannot be accessed.
with regard to the above problems, I guess there may be something wrong with the way my static resources are used.
so I would like to ask under what circumstances are the resources in assets and the resources in static used respectively?
if I don"t solve this problem, I have to put a copy of the static file outside the project when I deploy the project to meet the access requirements of some abnormal js files or static resources.
ask for advice.

Css html5 javascript

Mar.18,2021

The resources in

1.assets usually put pictures, css and so on, which will be processed by webpack. For example, some small images will be converted to base64, and a series of functions such as hash will be added to the file path, depending on how you configure
2. Files under the static directory will not be processed by webpack , you can access

directly through / static/xxx this depends on the directory structure and loading mode of the files you have packaged, as well as the configuration of your server, which is difficult to generalize. To put it simply, you can also do an alias in the server configuration.

remember: the resources in
assets are all packaged and compressed. The files placed in
static under the dist folder are directly copy to the dist folder, and will not be packaged and compressed.

the reference path of the static file before compression is the same as the path after compression (if you haven't tampered with the configuration file)

webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
    return path.join(__dirname, '..', dir)
}

// const createLintingRule = () => ({
//     test: /\.(js|vue)$/,
//     loader: 'eslint-loader',
//     enforce: 'pre',
//     include: [resolve('src'), resolve('test')],
//     options: {
//       formatter: require('eslint-friendly-formatter'),
//       emitWarning: !config.dev.showEslintErrorsInOverlay
//     }
// })

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: './src/main.js'
    },
    output: {
        // webpack:/dist
        path: config.build.assetsRoot,
        // webpackbundlemd5Hashscript
        filename: '[name].js',
        // webpack()
        publicPath: process.env.NODE_ENV === 'production'
            ? config.build.assetsPublicPath
            : config.dev.assetsPublicPath
    },
    resolve: {
        // ,
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
        }
    },
    module: {
        rules: [
            // ...(config.dev.useEslint ? [createLintingRule()] : []),
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                // queryloader,query  options 
                options: {
                    limit: 10000,//10000base64
                    name: utils.assetsPath('img/[name].[hash:7].[ext]') //name.7hash.
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!postcss-loader!less-loader'
            },
            {
                test: /\.pug$/,
                loader: 'pug'
            }
        ]
    },
    node: {
        // prevent webpack from injecting useless setImmediate polyfill because Vue
        // source contains it (although only uses it if it's native).
        setImmediate: false,
        // prevent webpack from injecting mocks to Node native modules
        // that does not make sense for the client
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
    }
}

webpack.dev.conf.js

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
    module: {
        //rulessourceMap: false,sourceMap
        rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
    },
    // cheap-module-eval-source-map is faster for development
    devtool: config.dev.devtool,

    // these devServer options should be customized in /config/index.js
    devServer: {
        clientLogLevel: 'warning',
        historyApiFallback: {
            rewrites: [
                { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
            ],
        },
        hot: true,
        contentBase: false, // since we use CopyWebpackPlugin.
        compress: true,
        host: HOST || config.dev.host,
        port: PORT || config.dev.port,
        open: config.dev.autoOpenBrowser,
        overlay: config.dev.errorOverlay
            ? { warnings: false, errors: true }
            : false,
        publicPath: config.dev.assetsPublicPath,
        proxy: config.dev.proxyTable,
        quiet: true, // necessary for FriendlyErrorsPlugin
        watchOptions: {
            poll: config.dev.poll,
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': require('../config/dev.env')  //
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
        new webpack.NoEmitOnErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        }),
        // copy custom static assets
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, '../static'),
                to: config.dev.assetsSubDirectory,
                ignore: ['.*']
            }
        ])
    ]
})

module.exports = new Promise((resolve, reject) => {
    portfinder.basePort = process.env.PORT || config.dev.port
    portfinder.getPort((err, port) => {
        if (err) {
            reject(err)
        } else {
            // publish the new Port, necessary for e2e tests
            process.env.PORT = port
            // add port to devServer config
            devWebpackConfig.devServer.port = port

            // Add FriendlyErrorsPlugin
            devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
                compilationSuccessInfo: {
                    messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
                },
                onErrors: config.dev.notifyOnErrors
                    ? utils.createNotifierCallback()
                    : undefined
            }))

            resolve(devWebpackConfig)
        }
    })
})

webpack.prod.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 
const ImageminPlugin = require('imagemin-webpack-plugin').default

const env = process.env.NODE_ENV === 'testing'
    ? require('../config/test.env')
    : require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
    // module,css
    module: {
        rules: utils.styleLoaders({
            sourceMap: config.build.productionSourceMap,
            extract: true,
            usePostCSS: true
        })
    },
    devtool: config.build.productionSourceMap ? config.build.devtool : false,
    output: {
        //
        path: config.build.assetsRoot,
        //
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        //,
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    },
    plugins: [
        // http://vuejs.github.io/vue-loader/en/workflow/production.html
        new webpack.DefinePlugin({
            'process.env': env
        }),
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: {
                    warnings: false,
                    //UglifyJsPlugin console
                    // drop_console: true,
                    // pure_funcs: ['console.log']
                }
            },
            sourceMap: config.build.productionSourceMap,
            parallel: true
        }),
        // extract css into its own file
        new ExtractTextPlugin({
            filename: utils.assetsPath('css/[name].[contenthash].css'),
            // Setting the following option to `false` will not extract CSS from codesplit chunks.
            // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
            // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
            // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
            allChunks: true,
        }),
        // Compress extracted CSS. We are using this plugin so that possible
        // duplicated CSS from different components can be deduped.
        //cssExtractTextPluginjs(css)
        new OptimizeCSSPlugin({
            cssProcessorOptions: config.build.productionSourceMap
                ? { safe: true, map: { inline: false } }
                : { safe: true }
        }),
        // generate dist index.html with correct asset hash for caching.
        // you can customize output by editing /index.html
        // see https://github.com/ampedandwired/html-webpack-plugin
        //html,cssjs
        new HtmlWebpackPlugin({
            filename: process.env.NODE_ENV === 'testing'
                ? 'index.html'
                : config.build.index,
            template: 'index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier-sharpoptions-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            chunksSortMode: 'dependency'
        }),
        // keep module.id stable when vendor modules does not change
        new webpack.HashedModuleIdsPlugin(),
        // enable scope hoisting
        new webpack.optimize.ModuleConcatenationPlugin(),
        // split vendor js into its own file
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks (module) {
                // any required modules inside node_modules are extracted to vendor
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(
                        path.join(__dirname, '../node_modules')
                    ) === 0
                )
            }
        }),
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            minChunks: Infinity
        }),
        // This instance extracts shared chunks from code splitted chunks and bundles them
        // in a separate chunk, similar to the vendor chunk
        // see: https://webpack.js.org/plugins/commons-chunk-plugin/-sharpextra-async-commons-chunk
        new webpack.optimize.CommonsChunkPlugin({
            name: 'app',
            async: 'vendor-async',
            children: true,
            minChunks: 3
        }),

        // copy custom static assets
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, '../static'),
                to: config.build.assetsSubDirectory,
                ignore: ['.*']
            }
        ]),

        // Make sure that the plugin is after any plugins that add images
        new ImageminPlugin({
            disable: process.env.NODE_ENV !== 'production', // Disable during development
            pngquant: {
                quality: '95-100'
            }
        })
    ]
})

if (config.build.productionGzip) {
    // ,.gz
    const CompressionWebpackPlugin = require('compression-webpack-plugin')

    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
                '\\.(' +
                config.build.productionGzipExtensions.join('|') +
                ')$'
            ),
            threshold: 10240, // 10240B=10kB
            minRatio: 0.8 // 0.8
        })
    )
}

if (config.build.bundleAnalyzerReport) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

Previous: There is a problem with centos7's cloud service using git clone.

Next: How does the dataTables plug-in for jquery set the time zone?

How to solve this asynchronous problem? Why is the array out of console.log always o?
o ...

Java html css html5 javascript

Feb.27,2021
How to solve this closure?
the onclick (), that clicks the arrow wants to call oil.prototype.createChart=function (oilRealtable,objId,meteId) {}, Please let me know ...

Html css html5 javascript

Feb.28,2021
Electron ran the program I made. Windows hung up all day and night, and linux hung up in a few hours.
I use electron to package my parking program. linuxwindowscpu windows ...

Node.js css html5 javascript

Feb.28,2021
Someone can help to see why the extra part of this page appears on the mobile phone.
although there is no pc page written on the mobile phone page, why is there so much blank space? there is nothing . https: mamba-working.github. preview address is here ...

Css html5 javascript

Feb.28,2021
How to use event delegation to add click events to three buttons and pop up the same layer pop-up box with different contents?
as shown in the figure, add a click event to the three microphone buttons on the right. Previously, you can add a click event to each button, but now you want to add it in the way of event delegation, how to achieve it? The code is as follows: <...

Css html5 javascript

Mar.02,2021
Is there any difference between the get requests of the two node backend request packets (superagent and request)?
superagent .get( http: passport.chinahr.com ajax m existLoginName ) .query( input + "=" + 15800000000) .end(function (err, response) { console.log( , response.body, err) }); request .get( http: passport.chinah...

Node.js css html5 javascript

Mar.02,2021
How to configure internationalization for koa2
I follow the demo code provided by i18next const i18next = require( i18next ); const i18m = require( koa-i18next-middleware ); add custom detector. i18m.LanguageDetector.addDetector({ name: mySessionDetector , lookup(ctx, options)...

Css html5 javascript node.js

Mar.03,2021
Use Taobao's flexbile to adapt in vue
the px2rem plug-in is used in vue, and then the picture or icon will be blurred when flexbile, adapts to a specific model. How to deal with this situation ...

Html css html5 javascript

Mar.03,2021
React introduces sliding event
recently do a react project, the first contact, there is a left slip event, I would like to ask how to add left slip event for react. The end result is a sideslip deletion. If there is any great god who knows, give me some guidance. Thank you, urgent ...

Css html5 javascript react.js

Mar.04,2021
How to display .gp5 file (sheet music file) on web page
the data in the score section of ...

Html css html5 javascript

Mar.04,2021
Want to search a JS front-end plug-in, but do not know what keywords to search, so embarrassed, the master to help take a look
on the above plug-in, in order to graphically count, from the big circle, jump to how many small circles, is similar to the timeline plug-in, but this is from one, pointing to multiple branches, the timeline is a back row want to search for a plug...

Html css html5 javascript

Mar.04,2021
Where can I upload the video to get the outer link?
where can I upload the video, and then take the outer link and put it on the video tag, preferably without advertising? is now uploaded to Qiniu, but the video cache is too slow (because you are using the test domain name), so ask if there are other pla...

Html css html5 javascript

Mar.04,2021
Mobile app scan ID card, local camera problem?
recently, there is a project that needs to do an app scan to identify the ID card, which requires that after the first picture is taken, the image is compressed by an asynchronous thread, and then api, is called to be identified by the background ocr and...

Css html5 javascript

Mar.04,2021
Why is the prototype chain not equal?
var arr = []; arr.toString = = Object.prototype.toString false ...

Html css html5 javascript

Mar.05,2021
How to use elementui el-scrollbar?
how does the scroll bar beautification component of element ui set the scroll bar to display one by one? The data update scroll bar becomes? ...

Css html5 javascript

Mar.05,2021
No demo, was found on the Internet or what was found was a donkey's head instead of a ponytail's rotation effect. Ask Daniel to give him a case or prompt a professional numeral. I'll search it.
h5 technology achieves this effect. It feels like c3 or jq can be done completely, but the sliding event is not very good. Is there any good way to feel that there will be bug, without using the ui framework? ...

Css html5 javascript

Mar.05,2021
The increment of the function value in the setInterval method in JS is incorrect.
defines a value in the setInterval () method so that x-= 1; secondLength = 60; setInterval(function(){ console.log(secondLength); secondLength -= 1; setDefault(secondtx,secondLength) },1000); looks like this. It is correct in t...

Css html5 javascript

Mar.07,2021
On the conflict between up and down, left and right sliding and click events in the mobile page
question: in an h5 mobile page, has such a parent-child relationship: sliding elements up and down = > left and right sliding elements = > Click elements if there are sliding up and down (drop-down refresh), left and right sliding (rotation switch...

Html css html5 javascript

Mar.09,2021
Problems encountered by beginners in rendering tables with vue
these data are all sent from the background STATUS 0 indicates auditing STATUS 1 indicates normal STATUS 2 indicates locked status but now I don t know how to change it to Chinese, how to do it? <tr v-for="(item,index) in infoData&quo...

Html css html5 javascript

Mar.09,2021
There are too many ellipses in the bootstrap-table, column, and the mouse is put on it to display all the information?
bootstrap-table rendering table, specify the width of the column, more than the width of the ellipsis display, require the mouse up to be similar to title to display the whole content? The rendering table code is as follows ...

Css html5 javascript

Mar.09,2021