vue-cli常用設定

cc長空發表於2018-02-24
Vue

vue-cli常用設定

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

路徑相關

css內引用的資源

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: `../../`, //注意: 此處根據路徑, 自動更改
        fallback: `vue-style-loader`
      })
    } else {
      return [`vue-style-loader`].concat(loaders)
    }
  }

本地訪問

config -> index.js

module.exports = {
  build: {
    //less
    //assetsPublicPath: `/`,
    assetsPublicPath: `./`,
    //less
  },
  //less
}

除錯相關

內網訪問

config -> index.js

module.exports = {
  //less
  dev: {
    //less
    port: process.env.PORT || 8080,//可改埠
    host:`192.168.0.105`,//不是8080埠可能需要指定host為本機IP
  }
}

跨域代理

config -> index.js

module.exports = {
  //less
  dev: {
    //less
    proxyTable: {
      `/AppHome`: {
        target: `http://192.168.0.211:2334`,//介面域名
        changeOrigin: true,//是否跨域
        pathRewrite: {
          `^/AppHome`: `/AppHome`//需要rewrite重寫
        }
      }
    },
  }
}
config -> dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: `"development"`,
  API_HOST: `"AppHome/"` 
})

config -> prod.env.js
module.exports = {
  NODE_ENV: `"production"`,
  API_HOST: `"http://xxx.xxx.com/AppHome/"` //生產環境改為絕對地址，免得路徑錯了
}

//呼叫
this.$http
    .post(process.env.API_HOST + "GetApproveTypeList", { ID: 0 })
    .then(data => {
    let $data = data.data;
    if ($data.IsSuccess) {
        this.list.push(...$data.Model);
    }
});

路由載入切換

非同步載入可以加快首屏載入速度，但是在開發階段會導致熱載入變慢，所以根據NODE_ENV來判斷，開發環境不使用非同步

let _import
if (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 = {
    // 你想要打包的模組的陣列
    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
            }
        })
    ]
};

2、在build目錄下的webpack.prod.conf.js新增新外掛

const webpackConfig = merge(baseWebpackConfig, {
   //less
  plugins: [
    //less
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require(`../vendor-manifest.json`)
    })
  ]
})

3、在專案根目錄下的index.html內新增dll.js引用

<!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 id="app"></div>
    <!-- built files will be auto injected -->
    <script src="./static/js/vendor.dll.js"></script>
  </body>
</html>

4、在專案根目錄下的package.json內新增dll命令(順便給build命令新增report)，執行一次生成dll.js

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

關閉SourceMap

config -> index.js

module.exports = {
  //less
  build: {
    //less
    productionSourceMap: false,
  },
}

相關文章