Abstract of this paper

From Moby front 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 issues

1 How to head Introduced inside js file ? background : stay  <head>  In 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 , We need to  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']
Step on the pit successfully , 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 , Yes  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 . You can  nuxt.config.js  Add configuration to file , You can also postcss.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 Catalog 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 ?
You can  nuxt.config.js  Add to 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 of , To correspond to different versions .
development, Local development ;release, Pre release version ;production, Online version . among , Pre release version ratio production edition , Extra
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  It's still :production.

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

In execution  backpack build  On command , I will  process.env.NODE_ENV  Change to  production
, And it's 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

At this time , 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  In ,env  attribute , Solve the problem :
env: {  
 __ENV: process.env.__ENV }

Development issues

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 modify window Object under a property  window.mobike = {} }

not enough yet , And tomorrow !!!

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

Front end journal - 1/10

The day before yesterday :

[ use nuxt Attention, little friend ] 1.0.0 Upgrade issues

hot wire :

1, Official account number. 【 menu - Journal 】 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