Vue-cli4 project package after deploying to the server using Nginx opens the page for blank issues

Console error

Chunk-elementui. d05b1787.js:1 Uncaught SyntaxError: Unexpected token '// alarm Resource interpreted as Stylesheet but transferred with MIME type text/ HTML: "http://xxx.com/static/css/app.7d4e3231.css".Copy the code

I think it’s a Vue Li4 and Webpack configuration problem or a Nginx configuration problem.

Configure WebPack in the VUE project

My vue.config.js file is configured as follows

'use strict' const path = require('path') const defaultSettings = require('./src/settings.js') function resolve (dir) { return path.join(__dirname, dir) } const name = defaultSettings.title || 'vue Admin Template' // page title module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', // lintOnSave: process.env.NODE_ENV === 'development', lintOnSave: false, productionSourceMap: false, devServer: { // port: port, open: true, overlay: { warnings: false, errors: true } }, configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: { '@': resolve('src') } } }, ...... Unimportant information omitted}}Copy the code

Configure the nginx.conf file in nginx as follows

worker_processes 2; events { #use epoll; worker_connections 2048; } http { include mime.types; default_type application/octet-stream; sendfile on; #tcp_nopush on; keepalive_timeout 65; server { listen 80; server_name xxx.com; location / { root html; index index.html; try_files $uri $uri/ /index.html; Proxy_set_header x-real-ip $remote_addr; proxy_set_header x-real-ip $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; } location /manager { alias html/manager/; index index.html; try_files $uri $uri/ /manager/index.html; } location /invoice {alias HTML /invoice; index index.html; } location /status { stub_status on; access_log off; }}}}Copy the code

Test Plan 1:

There are two assetsPublicPath properties in the file. To change the first one, change the assetsPublicPath property in the build:

Result: This should be a lower version of vueCli, which does not have the assetsPublicPath field.

Refer to the link: www.cnblogs.com/facefront/p…

Test Plan 2:

  1. The first solution isto change mode to history and the problem goes away
  2. The second solution is to set publicPath to ‘/’, not ‘./ ‘.

Result: The test was invalid.

Reference links: blog.csdn.net/yyj108317/a…

Test Plan 3:

After troubleshooting, the default file name format of vue-CLI build is JS /[name].[chunkhash].js, and NPM run each time Nginx cannot find the latest file to be uploaded, so it returns the default index.html file. Js cannot recognize the tag < HTML >, so console throws Uncaught SyntaxError: Unexpected token <, I try to modify the build/webpack prod. Conf. Jsoutput output filename format, at present, the problem has solved

Results: The current version of vueCli4 does not seem to support the Output field either, so it is not changed. But it’s a good idea. This is because the latest file uploaded by Nginx is not correctly recognized by the browser, which is using an old file that has not been updated. Different hash values result in an error. So, I cleared the browser’s cache, and that’s it. No errors. Whoo-hoo took most of the day.

Reference link: blog.csdn.net/weixin_3399…

Test Plan 4:

Result: This configuration was already there.

tips

Webpack and Nginx need further study. Six of one and half of the other is a waste of time.

Webpack website links: webpack.docschina.org/concepts/