How to solve the problem of configuring the packaging file path
Jun 04, 2018 pm 03:33 PMThis time I will show you how to solve the problem of configuring the packaging file path. What are the precautions for solving the problem of configuring the packaging file path? The following is a practical case, let's take a look.
Problem
The project works normally in the development environment. After packaging, thepicture disappears. After checking the element, it is found that the path is wrong.
The image path is like this:background: url(/static/img/bg_camera_tip.bd37151.png), but the file does not exist in this path.
The packaged file directory is as follows:Method 1
Check the configuration of webpack.base.conf.js in the build directory. The image file will be processed by url-loader.module: { rules: [ ... { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ... ] }
module: { rules: [ ... { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, publicPath: '../../', //你实际项目的引用地址前缀 name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ... ] }
Method 2
There is also a rule in webpack.base.conf.js. Each vue file will be processed by vueLoaderConfigmodule: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, ... ] }
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) }
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
vue interceptor compatibility processing
How to print log information in console
The above is the detailed content of How to solve the problem of configuring the packaging file path. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to recover expired WeChat files? Can expired WeChat files be recovered?

Photos cannot open this file because the format is not supported or the file is corrupted

How to transfer files from Quark Cloud Disk to Baidu Cloud Disk?

What to do if the 0x80004005 error code appears. The editor will teach you how to solve the 0x80004005 error code.

What is hiberfil.sys file? Can hiberfil.sys be deleted?

Different uses of slashes and backslashes in file paths
