Home  >  Article  >  Web Front-end  >  Pitfalls encountered in practical Vue projects and solutions

Pitfalls encountered in practical Vue projects and solutions

零下一度
零下一度Original
2017-06-25 09:35:323814browse

Pit 1. Resource loading 404 problem occurs when accessing index.html after packaging with webpack

##Solution Solution : In index.js in config, the level of the assetsPublicPath attribute in the build object needs to be adjusted from '/' to './'

 1  build: { 2     env: require('./prod.env'), 3     index: path.resolve(__dirname, '../dist/index.html'), 4     assetsRoot: path.resolve(__dirname, '../dist'), 5     assetsSubDirectory: 'static', 6     assetsPublicPath: './', 7     productionSourceMap: false,12     productionGzip: false,13     productionGzipExtensions: ['js', 'css'],18     bundleAnalyzerReport: process.env.npm_config_report19   }
 1 dev: { 2     env: require('./dev.env'), 3     port: 8080, 4     autoOpenBrowser: true, 5     assetsSubDirectory: 'static', 6     assetsPublicPath: '/', 7     proxyTable: {}, 8     // CSS Sourcemaps off by default because relative paths are "buggy" 9     // with this option, according to the CSS-Loader README10     // ()11     // In our experience, they generally work as expected,12     // just be aware of this issue when enabling this option.13     cssSourceMap: false14   }

Reason:

The static folder of the development environment is based on The root directory, so use

'/' directly. For example, this format: http://localhost:8080/static/img/logo.png.

Everyone should know that webpack packaging will automatically package the static folder. By default, a dist folder will be generated as the root directory of the production environment file, and the static folder will be generated in dist. So the generated format should be http://localhost:8080

/dist/static/img/logo.png. It is not based on the root directory, so ‘/’ The corresponding resource must not be found.

Introduce the meaning of these attributes:

assetsRoot: The target folder path of webpack output

assetsSubDirectory: The second level of webpack compilation output Folder

assetsPublicPath: The release path of webpack compiled output, for example: /eat in www.woshichihuo.com/eat is this path

Pit 2. Use webpack After packaging, a white screen appears when accessing index.html locally, but the resources are loaded normally

Solution: Do not set the routing setting mode to history mode. The default is still hash. In the index.js file under the router folder.

1 const router = new Router({2   // mode: 'history',3   routes: [4     index,5     home6   ]7 })
If you need history mode, please refer to the vue-router official documentation:

The above is the detailed content of Pitfalls encountered in practical Vue projects and solutions. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn