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 :
<script 
data-n-head="true" 
type="text/javascript" 
charset="utf-8">
console.log("hello")
</script>
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
="sass">
.red  color: red
</style>
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  
vue-loader.

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'

Vue.use(toast)





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
<https://mp.weixin.qq.com/s?__biz=MzU1MTQzOTQ1Nw==&mid=2247484168&idx=1&sn=cf65732eb5917c31abc3d4a4195d6c21&scene=21#wechat_redirect>




The day before yesterday :




[ use nuxt Attention, little friend ] 1.0.0 Upgrade issues
<https://mp.weixin.qq.com/s?__biz=MzU1MTQzOTQ1Nw==&mid=2247484161&idx=1&sn=392708f04acb9273d27994510899ee00&scene=21#wechat_redirect>




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 ]:

https://zhuanlan.zhihu.com/c_141430263






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