通常運(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)文章希望大家以后多多支持腳本之家！

最新評論