Business background

• for seo and speed up opening time for the first time
• convert a finished vue project into a nuxt project
• all kinds of problems are encountered constantly during this period. It"s too troublesome to open issue and ask questions separately
• focus on asking questions in one post

question 1

[resolved] static images under the static folder. References always report 404 errors

• sample code is as follows / pages/balance/charge.vue

// 3404
<img src="../../static/img/bg.png" />
<img src="/static/img/bg.png" />
<img src="~static/img/bg.png" />

• directory structure

pages
  balance
    charge.vue
static
  img
    bg.png

• solve

  • you don"t need to write static , nuxt configure the root path of static resources in webpack, so you can no longer write
  .
• the modified code is as follows

<img src="/img/bg.png" />

question 2

[resolved] the token, cached in the header header of axios will fail when the page is refreshed

• in the vue project, always declare a axios instance
globally.
• after logging in, write the acquired token to the header of the global axios instance, so that the server can verify
.
• because vue is a single-page program, there will only be one axios instance
globally.
• but after switching to nuxt , each time the page is refreshed, it has to be re-rendered from the server, that is, the axios object is re-instantiated
• the previously cached token data is gone
• this leads to a problem. As soon as the page is refreshed, the pages that need authorization will not be able to enter
.

.

• request.js page is as follows

import axios from "axios";
export default {
  // token
  setToken (token) {
     axio.defaults.headers.token = token;
  },
  // 
  post ( url, param) {
     return axio.post(url, param);
  }
}

• login.vue login page code is as follows

import request from "request";
mounted () {
  request.post("login", {usr: 111, pwd: 222})
         .then( (res) => {
           request.setToken(res);  // token
           this.$router.push("/home"); // 
         })
}

• home.vue personal center page code is as follows

import request from "request";
mounted () {
  request.post("home")
         .then( (res) => {
           // 
           // 
           // ,vuejs,
           // ,,,axiostoken,
         })
}

• solve

  • only put toekn in cookie or storage , and assign a next time
  in the post method each time you request.
  • but this will lead to a new problem. If you want to make a request in the created hook, it will report an error, because the hook will also run on the server side. The server side is a Node environment, and there is no cookie and storage
  at all.

question 3

cannot run the project through pm2, native is window environment

• Native npm run build npm run start you can start the service
• but not with pm2 ~
The result of the
• pm2 command is as follows

pm2 start npm --start

[PM2] Applying action restartProcessId on app [npm](ids: 2)
[PM2] [npm](2) 
[PM2] Process successfully started

 App name  id  mode  pid  status   restart  uptime  cpu  mem     user           watching 

 npm       2   fork  348  stopped  16       0       0%   0 B     Administrator  disabled 

 Use `pm2 show <id|name>` to get more details about an app

• output pm2 log found the following error

E:\Project\.pm2\logs\npm-out.log last 15 lines:
E:\Project\.pm2\logs\npm-error.log last 15 lines:
2|npm      | C:\PROGRAM FILES\NODEJS\NPM.CMD:1
2|npm      | (function (exports, require, module, __filename, __dirname) { :: Created by npm, please don"t edit manually.
2|npm      |                                                               ^
2|npm      |
2|npm      | SyntaxError: Unexpected token :
2|npm      |     at createScript (vm.js:80:10)
2|npm      |     at Object.runInThisContext (vm.js:139:10)
2|npm      |     at Module._compile (module.js:599:28)
2|npm      |     at Object.Module._extensions..js (module.js:646:10)
2|npm      |     at Module.load (module.js:554:32)
2|npm      |     at tryModuleLoad (module.js:497:12)
2|npm      |     at Function.Module._load (module.js:489:3)
2|npm      |     at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\pm2\lib\ProcessContainerFork.js:75:21)
2|npm      |     at Module._compile (module.js:635:30)
2|npm      |     at Object.Module._extensions..js (module.js:646:10)

 [sig] sh 8548! sigpacket::process: Suppressing signal 18 to win32 process (pid 10652)

[1]+  Stopped                 pm2 logs