Summary of common settings for vue-cli

I have done several projects based on vue-cli. I want to write out some of my common settings. I have been polished for a long time. I saw that vue-cli3.0 is almost out and I can't polish it anymore. .

Path related

Resources referenced in css

build -&gt; 
 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
  //less
  // Extract CSS when that option is specified
  // (which is the case during production build)
  if () {
   return ({
    use: loaders,
    publicPath: '../../', //Note: This is automatically changed according to the path    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

Local access

config -> 
 = {
 build: {
  //less
  //assetsPublicPath: '/',
  assetsPublicPath: './',
  //less
 },
 //less
}

Debugging related

Intranet access

config -&gt; 

 = {
 //less
 dev: {
  //less
  port:  || 8080,//Port changeable  host:'192.168.0.105',//Not port 8080, it may be necessary to specify host as native IP }
}

Cross-domain proxy

config -&gt; 
 = {
 //less
 dev: {
  //less
  proxyTable: {
   '/AppHome': {
    target: 'http://192.168.0.211:2334',//Interface domain name    changeOrigin: true,//Whether it crosses the domain    pathRewrite: {
     '^/AppHome': '/AppHome'//Rewrite rewrite is required    }
   }
  },
 }
}
config -&gt; 
 = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST: '"AppHome/"' 
})
config -&gt; 
 = {
 NODE_ENV: '"production"',
 API_HOST: '"/AppHome/"' //Change the production environment to absolute address to avoid the path being wrong}
//Callthis.$http
  .post(.API_HOST + "GetApproveTypeList", { ID: 0 })
  .then(data =&gt; {
  let $data = ;
  if ($) {
    (...$);
  }
});

Route loading switch

Asynchronous loading can speed up the loading of the first screen, but it will cause the hot loading to slow down during the development stage. Therefore, according to NODE_ENV, the development environment does not use asynchronous.

let _import
if (.NODE_ENV === 'development') {
 _import = file => require('@/components/' + file + '.vue').default
}
if (.NODE_ENV === 'production') {
 _import = file => () => import('@/components/' + file + '.vue')
}

routes: [
  {
    path: '/',
    name: 'Index',
    component: _import('Approve/Index'),
    meta: {
      level: 1
    }
  },
]

Pack

Dll Packaging

1. Create a new build directory

var path = require("path");
var webpack = require("webpack");
 = {
  // Array of modules you want to package  entry: {
    vendor: ['vue/dist/', //Some resources need to specify js directly, otherwise they will be packaged repeatedly         'vuex',
         'axios',
         'vue-router'
        ]
  },
  output: {
    path: (__dirname, '../static/js'), // Where to output the file after packaging    filename: '[name].',
    library: '[name]_library'
    // The global variable name exposed in  },
  plugins: [
    new ({
      path: (__dirname, '..', '[name]-'),
      name: '[name]_library',
      context: __dirname
    }),
    // Compress and packaged files    new ({
      compress: {
        warnings: false
      }
    })
  ]
};

2. Add new plug-ins in the build directory

const webpackConfig = merge(baseWebpackConfig, {
  //less
 plugins: [
  //less
  new ({
   context: __dirname,
   manifest: require('../')
  })
 ]
})

3. Add a reference in the root directory of the project

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
  <div ></div>
  <!-- built files will be auto injected -->
  <script src="./static/js/"></script>
 </body>
</html>

4. Add the dll command in the root directory of the project (add report to the build command by the way), and run the build once.

 "scripts": {
  "dev": "node build/",
  "start": "npm run dev",
  "build": "node build/ --report",
  "dll": "webpack --config build//"
 }

Close SourceMap

config -> 
 = {
 //less
 build: {
  //less
  productionSourceMap: false,
 },
}

Summarize

The above is a summary of the commonly used vue-cli settings introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!