域天yt88加密狗複製

├─ src //主文件
│ ├─ api //接口文件夾
| | |- config.js //後端接口地址的配置,將測試、開發、生產環境分開
| | └─ user.js //接口文件，配置了token請求頭，具體接口根據需求修改
│ ├─ assets //資源文件
│ ├─ components //公用組件
│ ├─ directive //vue自定義指令
| ├─ filters //存放過濾器文件，自帶了手機號加密，手機號格式化，時間日期處理
| ├─ interceptors //存放axios攔截器配置，寫入了接口調用的loading加載以及http狀態碼報錯攔截
| ├─ interceptors //放置公用的接口，對數據進行類型限制
| ├─ layout //佈局文件，通過子路由渲染方式實現，具體HTML佈局根據需求修改
| ├─ mixins //混入文件，配置了一個平滑滾動的方法
| ├─ plugins //外部插件文件夾，配置了按需引入的element-ui
| ├─ reg //存放正則以及校驗的文件夾
| | |- reg.ts //存放正則表達式，自帶了傳真，郵箱，qq，手機號，銀行卡號，固定電話，密碼強度校驗正則
| | └─ validator.ts //存放element-ui自定義校驗，自帶了傳真，郵箱，qq，手機號，銀行卡號，固定電話，密碼強度自定義校驗
| ├─ router //路由文件
| ├─ store //vuex全局變量文件
| | |- index.ts //store主文件
| | └─ module //store模塊文件夾
| | | └─ user.ts //存放user相關的全局變量
| ├─ stylus //css預處理器文件夾
| | |- reset.styl //樣式初始化文件,自帶了非標準盒子，a標籤清除下劃線，清除內外邊距，禁止圖片拖拽等效果
| | └─ color.styl //顏色變量文件
| ├─ utils //公用方法文件夾
| | |- area.ts //存放省市區三級地區的數據
| | |- array.ts //存放數組相關的公用方法，自帶了兩個元素交換位置，元素前進後退一格，元素置頂或末尾，去重，刪除指定元素操作
| | └─ object.ts //存放對象相關的公用方法，自帶了對象清空所有值的方法
| ├─ views //頁面文件夾
| ├─ main.ts //主配置文件
| ├─ babel.config.js //babel配置文件，寫入了element-ui按需加載的配置
| ├─ package.json //npm的包管理文件
| ├─ tsconfig.json //ts配置文件
| ├─ vue.config.js //vue配置文件
複製代碼1.關閉productionSourceMap
首先，由於最新版的腳手架不自帶配置文件了，先在根目錄新建vue.config.js文件，關閉productionSourceMap，在vue.config.js中寫入如下內容
module.exports = {
productionSourceMap: false
}
複製代碼2.開啓Gzip壓縮
安裝插件compression-webpack-plugin，打開代碼壓縮，npm install --save-dev compression-webpack-plugin，現在的vue.config.js代碼如下，但是，需要注意的是，服務器上nginx也必須開啓gzip才能生效
// 是否爲生產環境
const isProduction = process.env.NODE_ENV !== ‘development’;

// gzip壓縮
const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)

module.exports = {
productionSourceMap: false,
configureWebpack: config => {
// 生產環境相關配置
if (isProduction) {
//gzip壓縮
const productionGzipExtensions = [‘html’, ‘js’, ‘css’]
config.plugins.push(
new CompressionWebpackPlugin({
filename: ‘[path].gz[query]’,
algorithm: ‘gzip’,
test: new RegExp(
‘\.(’ + productionGzipExtensions.join(’|’) + ‘)$’
),
threshold: 10240, // 只有大小大於該值的資源會被處理 10240
minRatio: 0.8, // 只有壓縮率小於這個值的資源纔會被處理
deleteOriginalAssets: false // 刪除原文件
})
)
}
}
}
複製代碼打開nginx文件夾下的nginx.conf文件，寫入以下內容
# 開啓gzip
gzip on;

# 啓用gzip壓縮的最小文件，小於設置值的文件將不會壓縮
gzip_min_length 1k;

# gzip 壓縮級別，1-9，數字越大壓縮的越好，也越佔用CPU時間，後面會有詳細說明
gzip_comp_level 2;

# 進行壓縮的文件類型。javascript有多種形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain text/css application/xml application/javascript application/x-javascript text/javascript;

# 是否在http header中添加Vary: Accept-Encoding，建議開啓
gzip_vary on;

# 設置壓縮所需要的緩衝區大小     
gzip_buffers 4 16k;

複製代碼然後輸入命令nginx -s reload重啓nginx服務
如果後端nginx開啓了gzip，可以從network中的Content-Encoding中看到gzip

3.開啓CDN加速(建議選配，CDN雖然速度快，但沒有本地打包穩定)
將使用的插件使用cdn鏈接，並且配置webpack將使用CDN的插件不進行打包，別忘記還要再index.html中引入js以及css
// 是否爲生產環境
const isProduction = process.env.NODE_ENV !== ‘development’;

// 本地環境是否需要使用cdn
const devNeedCdn = false

// cdn鏈接
const cdn = {
// cdn：模塊名稱和模塊作用域命名（對應window裏面掛載的變量名稱）
externals: {
vue: ‘Vue’,
vuex: ‘Vuex’,
‘vue-router’: ‘VueRouter’,
‘marked’: ‘marked’,
‘highlight.js’: ‘hljs’,
‘nprogress’: ‘NProgress’
},
// cdn的css鏈接
css: [
‘https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css’
],
// cdn的js鏈接
js: [
‘https://cdn.bootcss.com/vue/2.6.10/vue.min.js’,
‘https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js’,
‘https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js’,
‘https://cdn.bootcss.com/marked/0.8.0/marked.min.js’,
‘https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js’,
‘https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js’
]
}

module.exports = {
chainWebpack: config => {
// 注入cdn start
config.plugin(‘html’).tap(args => {
// 生產環境或本地需要cdn時，才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// 注入cdn start
},
configureWebpack: config => {
// 用cdn方式引入，則構建時要忽略相關資源
if (isProduction || devNeedCdn) config.externals = cdn.externals
}
}
複製代碼接下來，在index.html中引入使用了CDN的鏈接

<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link
        href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
        rel="stylesheet"
/>
<% } %>
<!-- 使用CDN的CSS文件 -->

<title>CoolDream</title>

We're sorry but blog doesn't work properly without JavaScript enabled. Please enable it to continue.

<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- 使用CDN的JS文件 -->

複製代碼打包後拋到服務器上，打開開發者工具的network，如果看到http請求cdn，那麼就代表配置成功了，如圖所示

4.公共代碼抽離，寫在gzip的代碼下方,最終的vue.config.js文件代碼如下
// 是否爲生產環境
const isProduction = process.env.NODE_ENV !== ‘development’;

// gzip壓縮
const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)

// 本地環境是否需要使用cdn
const devNeedCdn = false

// cdn鏈接
const cdn = {
// cdn：模塊名稱和模塊作用域命名（對應window裏面掛載的變量名稱）
externals: {
vue: ‘Vue’,
vuex: ‘Vuex’,
‘vue-router’: ‘VueRouter’,
‘marked’: ‘marked’,
‘highlight.js’: ‘hljs’,
‘nprogress’: ‘NProgress’
},
// cdn的css鏈接
css: [
‘https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css’
],
// cdn的js鏈接
js: [
‘https://cdn.bootcss.com/vue/2.6.10/vue.min.js’,
‘https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js’,
‘https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js’,
‘https://cdn.bootcss.com/marked/0.8.0/marked.min.js’,
‘https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js’,
‘https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js’
]
}

module.exports = {
productionSourceMap: false,
chainWebpack: config => {
// 注入cdn start
config.plugin(‘html’).tap(args => {
// 生產環境或本地需要cdn時，才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// 注入cdn start
},
configureWebpack: config => {
// 用cdn方式引入，則構建時要忽略相關資源
if (isProduction || devNeedCdn) config.externals = cdn.externals

    // 生產環境相關配置
    if (isProduction) {
        //gzip壓縮
        const productionGzipExtensions = ['html', 'js', 'css']
        config.plugins.push(
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' + productionGzipExtensions.join('|') + ')$'
                ),
                threshold: 10240, // 只有大小大於該值的資源會被處理 10240
                minRatio: 0.8, // 只有壓縮率小於這個值的資源纔會被處理
                deleteOriginalAssets: false // 刪除原文件
            })
        )
    }

    // 公共代碼抽離
    config.optimization = {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    chunks: 'all',
                    test: /node_modules/,
                    name: 'vendor',
                    minChunks: 1,
                    maxInitialRequests: 5,
                    minSize: 0,
                    priority: 100
                },
                common: {
                    chunks: 'all',
                    test: /[\\/]src[\\/]js[\\/]/,
                    name: 'common',
                    minChunks: 2,
                    maxInitialRequests: 5,
                    minSize: 0,
                    priority: 60
                },
                styles: {
                    name: 'styles',
                    test: /\.(sa|sc|c)ss$/,
                    chunks: 'all',
                    enforce: true
                },
                runtimeChunk: {
                    name: 'manifest'
                }
            }
        }
    }
}

}
複製代碼5.將靜態資源存儲在雲端，個人用的七牛雲
我個人申請了七牛雲，實名認證就有10G空間可用，不過不綁定域名的話只有30天體驗機會，我是綁定了我的域名進行DNS解析中轉，具體的操作可以參考這一篇博客，www.cnblogs.com/mazhichu/p/…
6.nginx配置緩存同樣也可以提高網站的訪問速度（雖然這點有點偏離前端打包主題了，但是對於自己獨立開發個人博客網站的前端來說還是非常有用的！）
在nginx.conf的http模塊中寫入一下內容
# 設置緩存路徑並且使用一塊最大100M的共享內存，用於硬盤上的文件索引，包括文件名和請求次數，每個文件在1天內若不活躍（無請求）則從硬盤上淘汰，硬盤緩存最大10G，滿了則根據LRU算法自動清除緩存。
proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;
複製代碼然後在nginx.conf的serve模塊中寫入一下內容，保存配置，nginx -s reload重啓服務即可看到效果
location ~* ^.+.(css|js|ico|gif|jpg|jpeg|png)$ {
log_not_found off;

關閉日誌

access_log off;

緩存時間7天

expires 7d;

源服務器

proxy_pass http://localhost:8888;

指定上面設置的緩存區域

proxy_cache imgcache;

緩存過期管理

proxy_cache_valid 200 302 1d;
proxy_cache_valid 404 10m;
proxy_cache_valid any 1h;
proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
}