vue生產環境防審查防止f12防盜站方法

2021-10-08 23:12:17 字數 1572 閱讀 9899

得益於 lodash template 渲染的index.html,我們可以在public/index.html指定生產環境的動態流程:

;      console.

log(element);}

script

>

其中:

這段**的含義是:當開啟控制台時,列印乙個影象,如果該路徑不是我們指定的process.env.base_url + 404,就跳轉到 404 頁面。

假如我們根目錄部署,這時在vue.config.js內的publicpath就是/

module.exports =

從而上面一段**會渲染為:

if

(window.location.pathname !=

'/'+

'404')}

);console.

log(element)

;}

也就是開啟控制台就跳轉到/404,在/404不跳轉,防止使用者審查。

假如在子目錄部署,比如部署到 github pages 上,有乙個子路徑/my-project/,我們可以這樣寫vue.config.jspublicpath

const repo =

'my-project'

module.exports =

進而上面一段**在生產環境打包就會渲染成:

if

(window.location.pathname !=

'/my-project/'

+'404')}

);console.

log(element)

;}

這段和上面乙個意思,只不過這裡多了子路徑。

是不是有人疑惑process.env.base_url哪來的,只要指定了publicpath,他就會預設定義好和publicpath值一樣的process.env.base_url

不信的話可以用匯出 webpack 配置命令檢視:

# 生產環境的配置

vue inspect --mode production > output.js

之後在定義執行中變數的外掛程式defineplugin部分有:

如果想自已新增其他變數可以用環境變數配置檔案.env.***,或者用 webpack chain 做tap()侵入。

vue開發環境 生產環境配置

vue開發環境 生產環境配置 首先生成三個檔案 env env.development env.production 他會根據你執行的環境 去自動走相應的檔案 env node env production env.development env.production node env produc...

vue專案打包部署生產環境

打包部署生產環境之前需要修改配置檔案 修改一 build utils.js 修改publicpath 這樣寫是處理打包後找不到靜態檔案的問題 修改二 config index.js 修改assetspublicpath 修改目的是為了解決js找不到的問題 3.執行命令 npm run build 打...

vue3 0 配置開發環境和生產環境

前言 開發過程 測試過程 生產過程使用的介面位址不能,還有執行的操作可能也不一樣,也就需要實現配置好開發環境 測試環境 生產環境,需要什麼環境下的配置直接使用即可。1 在src同級目錄也就是根目錄下新建檔案 env.development 開發環境 env.test 測試環境 env.product...