使用vue2.0開發(fā)html5完成時(shí)苇本,使用npm run build打包文件是路徑會(huì)出現(xiàn)問題
解決方法:
找到當(dāng)前項(xiàng)目的config/index.js(大概在46行)按照下面的內(nèi)容修改
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',//在這里將改成 相對(duì)路徑 assetsPublicPath: './'
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
修改完成后使用npm run build打包,完成時(shí)命令行會(huì)提示
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
***提示打包完成
打包的文件需要使用HTTP服務(wù)器提供服務(wù)
直接打開index.html文件是以文件的形式打開將不起作用
打包完成后當(dāng)前的項(xiàng)目?jī)?nèi)新增了dist的文件夾里面有兩個(gè)打包好的文件 一個(gè)是static靜態(tài)資源文件 一個(gè)是index文件 于是我就在編輯器點(diǎn)擊生成的index.html文件在瀏覽器打開結(jié)果出錯(cuò)了
本地資源static所有文件都不能使用包括css,images,js,json...等等,在控制臺(tái)看到報(bào)錯(cuò)404未找到文件
***其實(shí)這也不奇怪症见,因?yàn)樯鲜龃虬瓿蓵r(shí)提示說了,當(dāng)前的文件需要在HTTP服務(wù)器下才能跑起來
于是我使用了node的http-server 服務(wù)器可以成功的打開了打包的文件沒有報(bào)錯(cuò)
怎么使用node提供的http-server呢媒熊?醒第?况凉?
1下載node并安裝
首先安裝nodejs上官網(wǎng),搜索绽快,下載芥丧,然后安裝,直接下一步坊罢,直至完成即可 輸入cmd打開命令行工具
輸入node -v 顯示版本 代表安裝成功 輸入npm -v 顯示版本 代表安裝成功 (npm是node.js自帶的無需下載)
2安裝http-server
在cmd工具欄輸入npm install http-server -g 全局安裝http-server 安裝一次就行后面使用時(shí)可以直接使用
安裝完成后续担,打開你的項(xiàng)目(dist)目錄輸入hs或者h(yuǎn)ttp-server;就可以了
D:\dev\Git\learngit\At-all-Time\dist>hs //輸入命令hs啟動(dòng)本地服務(wù)器
Starting up http-server, serving ./
Available on:
http://192.168.43.222:8080 //在同一個(gè)局域網(wǎng)下手機(jī)連接訪問這地址(說白了活孩,就是說手機(jī)電腦連接相同的WIFI都可以訪問頁面的內(nèi)容)
http://127.0.0.1:8080 //這個(gè)IP局限于電腦打開
Hit CTRL-C to stop the server
好了糾結(jié)了一天的打包文件終于可以跑起來了