Vue cli project, what is the problem with the picture path after build?

1. Build the project using vue init webpack-simple, and the directory structure is as follows

2.

introduces the image
3 in the components of vue. After the project is deployed, because the project is placed under the domain name http. Com / static, the path of the image is wrong. How to solve it?

Vue.js javascript html5
Mar.17,2021

assetsPublicPath:'. /'

assetsPublicPath:'. /'

utils.js 

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

webpack.base.conf 

{
   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
   loader: 'url-loader',
   options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]'),
     outputPath: process.env.NODE_ENV === 'production' ? '../' : ''
  }
},

you can see how to configure web pack to physically disappear the picture, and packaging it into bace64 can also reduce the number of connections.

Previous: How html closes this page, returns to the previous page, and refreshes

Next: What to do if there is a special symbol in the link of the a tag that causes the link to fail?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu