快捷導(dǎo)航

HBuilder導(dǎo)入vue項(xiàng)目并通過(guò)域名訪問(wèn)的過(guò)程詳解

更新時(shí)間：2022年05月05日 10:06:39 作者：lzy711

這篇文章主要介紹了HBuilder導(dǎo)入vue項(xiàng)目并通過(guò)域名訪問(wèn),一般情況下運(yùn)行vue項(xiàng)目需要安裝node.js，通過(guò)npm命令來(lái)安裝vue組件和運(yùn)行vue項(xiàng)目，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下

一、什么是node.js

node.js不是一門(mén)語(yǔ)言，不是庫(kù)，不是框架，只是一個(gè)javeScript運(yùn)行時(shí)環(huán)境

簡(jiǎn)單的就是node.js可以解析和執(zhí)行javeScript代碼，以前只有瀏覽器可以解析執(zhí)行JaveScript代碼，

現(xiàn)到的javeScript可以完全脫離瀏覽器來(lái)運(yùn)行，一切都?xì)w功于node.js、

nodejs構(gòu)建于Chrome的V8引擎[目前解析執(zhí)行JaveScript最快的]之上：代碼只是具有特定格式的字符串而已，引擎可以解析和運(yùn)行代碼

二、node.js和npm關(guān)系

npm開(kāi)發(fā)出來(lái)后，它的作者Isaaz曾經(jīng)聯(lián)系過(guò)jQuery、Bootstrap的作者，希望他們提交自己的軟件包給npm進(jìn)行管理，但是jQuery、Bootstrap的作者不理睬。

于是Isaaz聯(lián)系Node.js的作者，當(dāng)時(shí)Node.js并不火，而且缺一個(gè)包管理器，二者一拍即合，并且Node.js愿意將npm集成進(jìn)來(lái)，npm成為Node.js的一個(gè)組件。

從此，Node.js和npm相互扶持，讓Node.js火遍全球，也讓npm的用戶不斷增多，目前npm管理了60萬(wàn)個(gè)軟件包，平均每天有上億次下載，曾經(jīng)對(duì)npm愛(ài)理不理的jQuery、Bootstrap也加入到了npm。

三、導(dǎo)入項(xiàng)目

先從本地導(dǎo)入vue項(xiàng)目。

導(dǎo)入以后的結(jié)構(gòu)。

1、運(yùn)行npm install

運(yùn)行完成以后會(huì)多一個(gè)node_modules的目錄

2、運(yùn)行npm run build

3、運(yùn)行npm run dev，這個(gè)時(shí)候只能通過(guò)ip訪問(wèn)。

4、配置域名訪問(wèn)，修改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)行壓縮的文件大小最小值，這個(gè)對(duì) 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再次啟動(dòng)

到此這篇關(guān)于HBuilder導(dǎo)入vue項(xiàng)目并通過(guò)域名訪問(wèn)的文章就介紹到這了,更多相關(guān)HBuilder導(dǎo)入vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: