HBuilder導入vue項目并通過域名訪問的過程詳解
通常運行vue項目需要安裝Node.js。通過npm命令來安裝vue組件和運行vue項目。
一、什么是node.js
node.js不是一門語言，不是庫，不是框架，只是一個javeScript運行時環(huán)境
簡單的就是node.js可以解析和執(zhí)行javeScript代碼，以前只有瀏覽器可以解析執(zhí)行JaveScript代碼，
現(xiàn)到的javeScript可以完全脫離瀏覽器來運行，一切都歸功于node.js、
nodejs構(gòu)建于Chrome的V8引擎[目前解析執(zhí)行JaveScript最快的]之上：代碼只是具有特定格式的字符串而已，引擎可以解析和運行代碼
二、node.js和npm關(guān)系
npm開發(fā)出來后，它的作者Isaaz曾經(jīng)聯(lián)系過jQuery、Bootstrap的作者，希望他們提交自己的軟件包給npm進行管理，但是jQuery、Bootstrap的作者不理睬。
于是Isaaz聯(lián)系Node.js的作者，當時Node.js并不火，而且缺一個包管理器，二者一拍即合，并且Node.js愿意將npm集成進來，npm成為Node.js的一個組件。
從此，Node.js和npm相互扶持，讓Node.js火遍全球，也讓npm的用戶不斷增多，目前npm管理了60萬個軟件包，平均每天有上億次下載，曾經(jīng)對npm愛理不理的jQuery、Bootstrap也加入到了npm。
三、導入項目
先從本地導入vue項目。
導入以后的結(jié)構(gòu)。
1、運行npm install
運行完成以后會多一個node_modules的目錄
2、運行npm run build
3、 運行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, // 歸檔需要進行壓縮的文件大小最小值，這個對 10K 以上的進行壓縮
deleteOriginalAssets: false, // 是否刪除原文件
}),
],
}
}
},
devServer: {
public: 'www.bkqut.com',
port: 8081
},
}devServer: {
?? ?public: '域名',
?? ?port: 8081
?? ?},npm關(guān)閉服務：ctrl+c
npm run dev再次啟動
到此這篇關(guān)于HBuilder導入vue項目并通過域名訪問的文章就介紹到這了,更多相關(guān)HBuilder導入vue項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE項目實現(xiàn)全屏顯示功能之screenfull用法
這篇文章主要介紹了VUE項目實現(xiàn)全屏顯示功能之screenfull用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家詳細介紹了vue自定義封裝按鈕組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要介紹了vue中使用scrollTo無效的解決方法，想要使用scrollTo使當前網(wǎng)頁滾動到指定位置，本文就來解決一下，具有一定的 參考價值，感興趣的可以了解一下2023-08-08
vue子組件改變父組件傳遞的prop值通過sync實現(xiàn)數(shù)據(jù)雙向綁定(DEMO)
本文通過一個demo給大家介紹了vue子組件改變父組件傳遞的prop值通過sync實現(xiàn)數(shù)據(jù)雙向綁定,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
這篇文章詳細介紹了vue渲染機制和如何解決數(shù)據(jù)修改頁面不刷新問題的多種方法，想了解更多的小伙伴可以借鑒閱讀2023-03-03
VUE2 前端實現(xiàn) 靜態(tài)二級省市聯(lián)動選擇select的示例
下面小編就為大家分享一篇VUE2 前端實現(xiàn) 靜態(tài)二級省市聯(lián)動選擇select的示例。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
目前大多數(shù)PC端應用都有配套的移動端APP，如微信，淘寶等，通過使用手機APP上的掃一掃功能去掃頁面二維碼圖片進行登錄，使得用戶登錄操作更方便，安全，快捷，這篇文章主要介紹了Vue PC端如何實現(xiàn)掃碼登錄功能,需要的朋友可以參考下2023-01-01
這篇文章介紹了VUE中template的三種寫法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
在日常開發(fā)中,經(jīng)常遇到需要支持列表循環(huán)滾動展示,特別是在數(shù)據(jù)化大屏開發(fā)中,所以小編今天為大家介紹一下如何利用vue3實現(xiàn)一個無縫滾動組件吧2023-09-09
vue按需加載組件webpack require.ensure的方法
本篇文章主要介紹了vue按需加載組件webpack require.ensure的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12