基于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.jsmodule.exports = { build: { //less //assetsPublicPath: '/', assetsPublicPath: './', //less }, //less}調試相關
內網訪問
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/"' //生產環境改為絕對地址，免得路徑錯了}//調用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 _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 = { // 你想要打包的模塊的數組 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.jsmodule.exports = { //less build: { //less productionSourceMap: false, },}總結
以上所述是小編給大家介紹的vue-cli常用設置總結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
