From Moby front end team yingye , If there is something wrong, please correct it

This article mainly shares the pitfalls encountered in construction and development: For example, precompiled support, Browser environment window Object support and ENV Configuration, etc

Welcome to this series, Message Sharing ssr Some experience of

Construction problem

1 How to be in head Introduced inside js file? background: stay <head>  Label, with inline Form introduction of flexible.js  File mobile project can be imported 
flexible.js  To achieve mobile adaptation
Nuxt.js adopt vue-meta  Implement header label management

Discover by viewing documents, You can configure it as follows:
// nuxt.config.js
head: {  
 script: [    {
     innerHTML: 'console.log("hello")',
     type: 'text/javascript',
     charset: 'utf-8'
   }  ] }
Result, generate html as follows:
find vue-meta  Escaped the quotation mark, join __dangerouslyDisableSanitizers: ['script']
  after, You won't escape these characters anymore.

Notes: Use this field carefully!

Next, Must put console.log("hello")  Replace with flexible.js, After the configuration upgrade, it is as follows:
head: {  
 script: [
   innerHTML: require('./assets/js/flexible'),
   type: 'text/javascript',
   charset: 'utf-8'
 ],  __dangerouslyDisableSanitizers: ['script']
Crater success, Next pit...

2 How to preprocess? background: In component <template>,<script>  or <style>  After using various preprocessors and processors, Console error<style lang
.red  color: red
The solution to this problem is very simple, Just install these dependencies:
npm install --save-dev node-sass sass-loader
But the process is not very smooth, When reading Chinese documents, Ignore version number, Follow the instructions above, Discovery failed, Finally, the solution is found.

Version number of Chinese document is too low, To view documents, Be sure to read the latest version of the English document!

3 How to use px2rem? background: stay css in, Write in px, adopt px2rem loader  take px convert to rem
In previous projects, It is through px2rem loader  Realized, But in Nuxt.js Under the project, Add to css loader It's still laborious, Because it involves 

Came up with an alternative:

have access to postcss  Handle. Can be in nuxt.config.js  Add configuration to file, Can also be inpostcss.conf.js  Add to file.
build: {  
 postcss: [    
   require('postcss-px2rem')({      remUnit: 75 // Convert base units    })  ] },

4 How to expand webpack To configure? background: to utils Directory add alias
Just mentioned,Nuxt.js Built in webpack  To configure

If we want to expand the configuration, stay nuxt.config.js  Add to file.

Also in this file, Print out the configuration information.
extend (config, ctx) {  console.log('webpack config:', config)  
 if (ctx.isClient) {    
   // Add to alias To configure    Object.assign(config.resolve.alias, {      
     'utils': path.resolve(__dirname, 'utils')    })  } }

5 How to add vue plugin? background: Encapsulates a toast vue plugin Because vue The instantiation process is not exposed, When will it be injected?
Can be in nuxt.config.js  Add in plugins To configure, So the plug-in will Nuxt.js Import loaded before application initialization.
module.exports = {  plugins: ['~plugins/toast'] }
~plugins/toast.js file:
import Vue from 'vue'
import toast from '../utils/toast'
import '../assets/css/toast.css'


6 How to modify environment variables NODE_ENV? background: In the project, Set up 3 individual NODE_ENV  Value, To correspond to different versions.
development, Local development;release, Pre release version;production, Online version. among, Pre release version ratio production Edition, More
vconsole.// package.json
"scripts": {  
 "buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",  
 "startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"
Printing process.env.NODE_ENV  Still is:production.

stay backpack  In the source code, We got the answer:

In execution backpack build  Command time, Will bring process.env.NODE_ENV  Modified to production
, And it's write dead and not configurable...... ( Rewrite backpack, Okay~)

Be careful:lerna To manage is also a noteworthy tool

Helpless, Only in process.env  lower, Add to __ENV  attribute, representative NODE_ENV

Then, Information printed on the page process.env.__ENV undefined, But it can print out process.env.NODE_ENV.

Can be configured by nuxt.config.js  Medium,env  attribute, Solve the problem:
env: {  
 __ENV: process.env.__ENV }

Development problem

1Window or Document Object not defined? background: Introducing third-party plug-ins, Or write directly in the code window  The console will give a warning,window  Undefined.
When the cause of the problem,node No server window  or document  object.

Resolvent: adopt process.browser  To differentiate the environment
if (process.browser) {  
 // Introduce third-party plug-ins  require('***')  
 // Or modifywindow Object under a property  window.mobike = {} }

not enough yet, And tomorrow!!!

Did you miss yesterday's journal, Give you a portal:

Front-end daily - 1/10

The day before yesterday:

[ Use nuxt Attention, little friend] 1.0.0 Upgrade issues

Hot wire:

1, It can be in the public address.【 menu - Daily Magazine】 See all the daily article templates on

2, The Japanese journal also launched Zhihu column [ New front-end vision]:


Break in a day *k Concerned journal number

A daily magazine aiming at quality as life

A daily issue that big guys are all following


Let's share it with our learning partners