question
- The default configuration of vue-cli is packaged and deployed to a static resource path error problem under a specific path.
- The problem of introducing large image path error in css file after using relative paths for static resource packaging
Default packaging configuration file generated using vue-cli2 scaffolding,npm run buildPackage and deploy the project to a specific path: //ip:port/test/
At this time, access //ip:port/test/ can be accessed normally, but the referenced file server response is 404, and we check the resource request path:
http://ip:port/static/css/app.[hash].css http://ip:port/static/js/app.[hash].js
It can be seen that the above static resource access path is incorrect, and our correct request path should be
http://ip:port/test/static/css/app.[hash].css http://ip:port/test/static/js/app.[hash].js
reason
It can be seen that the reason why resource loading fails is a path error. We can move to the file.
<!DOCTYPE html> <html> <head> <title>project</title> <link href=/static/css/ rel=stylesheet> </head> <body> <div id=app></div> <script type=text/javascript src=/static/js/> </script> ... </body> </html>
It can be seen that both the imported css and js use the absolute root directory path. Therefore, when deploying the project to a specific directory, the resource path it introduces cannot be correctly parsed.
solve
When packaging webpack, use relative paths to handle static resources and modify the resource publishing path configuration in build (build/);
build: {
...
// Paths
assetsRoot: (__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
...
}
Change assetsPublicPath: '/' to assetsPublicPath: './', then package it, and deploy the resource to a specific path, and then access it. At this time, you can access it normally, and js and css resources can also be loaded and accessed normally.
There was an error in introducing image resources in the assets directory in css
We often quote an img image like this
background: url('static/img/');
But after packaging, the reference address of this image is as follows.
http://ip:port/test/static/css/static/img/
It can be seen that there is a problem with the path of the image in CSS. When analyzing the packaging process, CSS is introduced in JS or written in VUE file. The css file is first processed by less, postcss, etc., and after processing, it will be processed by ExtractTextPlugin. ExtractTextPlugin extracts all the css in JS into the file.
Solution 1
Set to false
: false,
Turn off the extracted css function, package and deploy again, and you will find that there is no css file, and the css files are all in the file. Inject css into the file through js. At this time, the access path of the picture is equivalent to the file, so you can access it normally.
Solution 2
Set publicPath in ExtractTextPlugin plugin
The ExtractTextPlugin plugin is to extract css from the js file. We can achieve the same effect by configuring the static resource path parameters of ExtractTextPlugin. The files in the build directory are modified and publicPath: '../../';
// Extract CSS when that option is specified
// (which is the case during production build)
if (!) {
return ({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
Package and deploy again and find that the image access path at this time is '../../static/img/';
The publicPath property value is the relative path from the packaged file to the file
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.