Vue基础学习之项目整合及优化

import HelloWorld from '../../../../HelloWorld.vue'

const path = require('path')

const resolve = dir => {
 return path.join(__dirname, dir)
}

module.exports = {
 ...
 
 resolve: {
 alias: {
 '@': resolve('src'), // 定义 src 目录变量
 _lib: resolve('src/common'), // 定义 common 目录变量,
 _com: resolve('src/components'), // 定义 components 目录变量,
 _img: resolve('src/images'), // 定义 images 目录变量,
 _ser: resolve('src/services'), // 定义 services 目录变量,
 }
 },
 
 ...
}

import HelloWorld from '_com/HelloWorld.vue'

/* vue.config.js */
module.exports = {
 ...
 
 chainWebpack: config => {
 config.resolve.alias
 .set('@', resolve('src'))
 .set('_lib', resolve('src/common'))
 .set('_com', resolve('src/components'))
 .set('_img', resolve('src/images'))
 .set('_ser', resolve('src/services'))
 },
 
 ...
}

.img {
 background: (~_img/home.png);
}

import Vue from 'vue'
import App from './index.vue'
import router from './router'
import store from '@/store/'
import { Navigator } from '../../common'

// 如果是非线上环境，不加载 VConsole
if (process.env.NODE_ENV !== 'production') {
 var VConsole = require('vconsole/dist/vconsole.min.js');
 var vConsole = new VConsole();

 Vue.config.performance = true;
}

Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter;

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

import { Navigator } from '../index'

export default (Vue) => {

 // 如果是非线上环境，不加载 VConsole
 if (process.env.NODE_ENV !== 'production') {
 var VConsole = require('vconsole/dist/vconsole.min.js');
 var vConsole = new VConsole();

 Vue.config.performance = true;
 }

 Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter;
}

import Vue from 'vue'
import App from './index.vue'
import router from './router'
import store from '@/store/'
import entryConfig from '_lib/entryConfig/'

// 调用公共方法加载配置
entryConfig(Vue)

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

/* vue.config.js */
const isPro = process.env.NODE_ENV === 'production'

module.exports = {
 ...
 
 configureWebpack: config => {
 if (isPro) {
  return {
  plugins: [
   new CompressionWebpackPlugin({
    // 目标文件名称。[path] 被替换为原始文件的路径和 [query] 查询
   asset: '[path].gz[query]',
   // 使用 gzip 压缩
   algorithm: 'gzip', 
   // 处理与此正则相匹配的所有文件
   test: new RegExp(
    '\\.(js|css)$'
   ),
   // 只处理大于此大小的文件
   threshold: 10240,
   // 最小压缩比达到 0.8 时才会被压缩
   minRatio: 0.8，
   })
  ]
  }
 }
 }
 ...
}