When I initially used vue+webpack+vue-router for the project, it was normal to develop and test on the local PC, but after the code was packaged and deployed to the test server, the homepage of the project was always blank.
The first is that the file reference path in the packaged dist directory is incorrect, and an error will be reported because the file cannot be found, resulting in a blank screen.
Solution: modify the path exported by the bulid module in index.js under config. Because the content in index.html is imported through script tags, and your path is wrong, it must be blank to open. First look at the default path.
module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname,'.. /dist/ index.html'), assetsRoot: path.resolve(__dirname, ' ../dist'), assetsSubDirectory:'static', assetsPublicPath:'/', productionSourceMap: true assetsPublicPath defaults to'/' which is the root directory. And our index.html and static are under the same level directory. So it needs to be changed to'./';
Just execute npm run build again.
The second type: Since the routing mode is set to history, the default is hash.
Solution: The default mode in router/index.js routing configuration in routing is hash. If you change to history mode, it will be blank if you open it. So change it to hash or delete the mode configuration directly and let it default. If you have to use the history mode, you need to add a candidate resource on the server side that covers all situations: if the URL does not match any static resources, you should return an index.html, which is your app dependent page.
So just delete the mode or change the mode to hash.
The third type: the grammar of es6 is used in the project, some browsers do not support es6, resulting in compilation errors that cannot be parsed, resulting in a white screen.
Solution:
1. 安装 npm install --save-dev babel-preset-es2015
2. 安装 npm install --save-dev babel-preset-stage-3
3. Create a .babelrc file in the root directory of the project. The most basic configuration is:
{ // This item indicates that the transcoding rule "presets": [ // The env item uses the plug-in babel-preset-env, the following configuration refers to babel transcoding es6, es7, es8, and setting amd, Modular files like commonjs are not transcoded ["env", {"modules": false }], // The following is the es syntax that appears in different stages, including different transcoding plug-ins "stage-2" ], // The following option refers to plug-ins to process code conversion. Transform-runtime is used to process global functions and optimize babel compilation "plugins": ["transform-runtime"], // The following refers to the generated files, No comment "comments": false, // The following paragraph is the transcoding rule executed in a specific environment. When the environment variable is the following test, it will override the above setting "env": { // test is in advance Set the environment variables, if BABEL_ENV is not set, use NODE_ENV, if none is set, the default is development "test": { "presets": ["env", "stage-2"],// instanbul is a tool for testing transcoded code "plugins": ["istanbul"] } } }
Then restart npm run dev and you will find that it can run in other low-version browsers, and it is basically compatible with all browsers, except below ie8. And most mobile browsers are also ok. Repackaging to the official environment is also normal.
So far, the reasons for the white screen of all vue-related products are summarized!
Remember to configure in main.js
import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill();
npm i --save-dev babel-polyfill ,es6-promise