HBuilder導(dǎo)入vue項(xiàng)目并通過域名訪問的過程詳解
通常運(yùn)行vue項(xiàng)目需要安裝Node.js。通過npm命令來安裝vue組件和運(yùn)行vue項(xiàng)目。
一、什么是node.js
node.js不是一門語言，不是庫，不是框架，只是一個javeScript運(yùn)行時環(huán)境
簡單的就是node.js可以解析和執(zhí)行javeScript代碼，以前只有瀏覽器可以解析執(zhí)行JaveScript代碼，
現(xiàn)到的javeScript可以完全脫離瀏覽器來運(yùn)行，一切都?xì)w功于node.js、
nodejs構(gòu)建于Chrome的V8引擎[目前解析執(zhí)行JaveScript最快的]之上：代碼只是具有特定格式的字符串而已，引擎可以解析和運(yùn)行代碼
二、node.js和npm關(guān)系
npm開發(fā)出來后，它的作者Isaaz曾經(jīng)聯(lián)系過jQuery、Bootstrap的作者，希望他們提交自己的軟件包給npm進(jìn)行管理，但是jQuery、Bootstrap的作者不理睬。
于是Isaaz聯(lián)系Node.js的作者，當(dāng)時Node.js并不火，而且缺一個包管理器，二者一拍即合，并且Node.js愿意將npm集成進(jìn)來，npm成為Node.js的一個組件。
從此，Node.js和npm相互扶持，讓Node.js火遍全球，也讓npm的用戶不斷增多，目前npm管理了60萬個軟件包，平均每天有上億次下載，曾經(jīng)對npm愛理不理的jQuery、Bootstrap也加入到了npm。
三、導(dǎo)入項(xiàng)目
先從本地導(dǎo)入vue項(xiàng)目。
導(dǎo)入以后的結(jié)構(gòu)。
1、運(yùn)行npm install
運(yùn)行完成以后會多一個node_modules的目錄
2、運(yùn)行npm run build
3、 運(yùn)行npm run dev，這個時候只能通過ip訪問。
4、配置域名訪問，修改vue.config.js文件
const CompressionPlugin = require('compression-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
publicPath: isProd ? '/visual-drag-demo/' : './',
configureWebpack: () => {
if (isProd) {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要壓縮的文件類型
threshold: 10240, // 歸檔需要進(jìn)行壓縮的文件大小最小值，這個對 10K 以上的進(jìn)行壓縮
deleteOriginalAssets: false, // 是否刪除原文件
}),
],
}
}
},
devServer: {
public: 'www.bkqut.com',
port: 8081
},
}devServer: {
?? ?public: '域名',
?? ?port: 8081
?? ?},npm關(guān)閉服務(wù)：ctrl+c
npm run dev再次啟動
到此這篇關(guān)于HBuilder導(dǎo)入vue項(xiàng)目并通過域名訪問的文章就介紹到這了,更多相關(guān)HBuilder導(dǎo)入vue項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了解決Vue_localStorage本地存儲和本地取值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue多語言轉(zhuǎn)換的幾種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue3+Vue Router實(shí)現(xiàn)動態(tài)路由導(dǎo)航的示例代碼
隨著單頁面應(yīng)用程序(SPA)的日益流行,前端開發(fā)逐漸向復(fù)雜且交互性強(qiáng)的方向發(fā)展,在這個過程中,Vue.js及其生態(tài)圈的工具（如Vue Router）為我們提供了強(qiáng)大的支持,本文將介紹如何在Vue 3中使用Vue Router實(shí)現(xiàn)動態(tài)路由導(dǎo)航,需要的朋友可以參考下2024-08-08
vue打開新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實(shí)現(xiàn)傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Vue3中使用i18n,this.$t報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了.eslintrc配置目錄及配置項(xiàng)的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目proxyTable配置小結(jié)
本文主要介紹了vue項(xiàng)目proxyTable配置小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)掃碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
一文詳解WebStorm如何調(diào)試Vue項(xiàng)目
這篇文章主要介紹了如何使用WebStorm進(jìn)行斷點(diǎn)調(diào)試,包括配置、啟動本地應(yīng)用程序、設(shè)置斷點(diǎn)以及使用調(diào)試工具等步驟,文中通過圖文及代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
本篇文章主要介紹了vue之頁面緩存問題(基于2.0)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01