基于vue-cli做了好幾個項目了，想把一些自己的常用設置寫出來，磨了好久，一看vue-cli3.0都快出來了，不能再磨了。。

路徑相關(guān)

css內(nèi)引用的資源

build -> utils.js // 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 (options.extract) {   return ExtractTextPlugin.extract({    use: loaders,    publicPath: '../../', //注意: 此處根據(jù)路徑, 自動更改    fallback: 'vue-style-loader'   })  } else {   return ['vue-style-loader'].concat(loaders)  } }

本地訪問

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

調(diào)試相關(guān)

內(nèi)網(wǎng)訪問

config -> index.jsmodule.exports = { //less dev: {  //less  port: process.env.PORT || 8080,//可改端口  host:'192.168.0.105',//不是8080端口可能需要指定host為本機IP }}

跨域代理

config -> index.jsmodule.exports = { //less dev: {  //less  proxyTable: {   '/AppHome': {    target: 'http://192.168.0.211:2334',//接口域名    changeOrigin: true,//是否跨域    pathRewrite: {     '^/AppHome': '/AppHome'//需要rewrite重寫    }   }  }, }}config -> dev.env.jsmodule.exports = merge(prodEnv, { NODE_ENV: '"development"', API_HOST: '"AppHome/"' })config -> prod.env.jsmodule.exports = { NODE_ENV: '"production"', API_HOST: '"http://xxx.xxx.com/AppHome/"' //生產(chǎn)環(huán)境改為絕對地址，免得路徑錯了}//調(diào)用this.$http  .post(process.env.API_HOST + "GetApproveTypeList", { ID: 0 })  .then(data => {  let $data = data.data;  if ($data.IsSuccess) {    this.list.push(...$data.Model);  }});

路由加載切換

異步加載可以加快首屏加載速度，但是在開發(fā)階段會導致熱加載變慢，所以根據(jù)NODE_ENV來判斷，開發(fā)環(huán)境不使用異步

let _importif (process.env.NODE_ENV === 'development') { _import = file => require('@/components/' + file + '.vue').default}if (process.env.NODE_ENV === 'production') { _import = file => () => import('@/components/' + file + '.vue')}routes: [  {    path: '/',    name: 'Index',    component: _import('Approve/Index'),    meta: {      level: 1    }  },]

打包

dll打包

1、在build目錄新建webpack.dll.conf.js

var path = require("path");var webpack = require("webpack");module.exports = {  // 你想要打包的模塊的數(shù)組  entry: {    vendor: ['vue/dist/vue.esm.js', //有些資源需要直接指定js，否則會重復打包         'vuex',         'axios',         'vue-router'        ]  },  output: {    path: path.join(__dirname, '../static/js'), // 打包后文件輸出的位置    filename: '[name].dll.js',    library: '[name]_library'    // vendor.dll.js中暴露出的全局變量名。  },  plugins: [    new webpack.DllPlugin({      path: path.join(__dirname, '..', '[name]-manifest.json'),      name: '[name]_library',      context: __dirname    }),    // 壓縮打包的文件    new webpack.optimize.UglifyJsPlugin({      compress: {        warnings: false      }    })  ]};