使用vue2.0开发html5完成时,使用npm run build打包文件是路径会出现问题
解决方法:
找到当前项目的config/index.js(大概在46行)按照下面的内容修改
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',//在这里将改成 相对路径 assetsPublicPath: './'
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
修改完成后使用npm run build打包,完成时命令行会提示
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
***提示打包完成
打包的文件需要使用HTTP服务器提供服务
直接打开index.html文件是以文件的形式打开将不起作用
打包完成后当前的项目内新增了dist的文件夹里面有两个打包好的文件 一个是static静态资源文件 一个是index文件 于是我就在编辑器点击生成的index.html文件在浏览器打开结果出错了
本地资源static所有文件都不能使用包括css,images,js,json...等等,在控制台看到报错404未找到文件
浏览器控制台报错
***其实这也不奇怪,因为上述打包完成时提示说了,当前的文件需要在HTTP服务器下才能跑起来
于是我使用了node的http-server 服务器可以成功的打开了打包的文件没有报错
怎么使用node提供的http-server呢???
1下载node并安装
首先安装nodejs上官网,搜索,下载,然后安装,直接下一步,直至完成即可 输入cmd打开命令行工具
输入node -v 显示版本 代表安装成功 输入npm -v 显示版本 代表安装成功 (npm是node.js自带的无需下载)
2安装http-server
在cmd工具栏输入npm install http-server -g 全局安装http-server 安装一次就行后面使用时可以直接使用
安装完成后,打开你的项目(dist)目录输入hs或者http-server;就可以了
D:\dev\Git\learngit\At-all-Time\dist>hs //输入命令hs启动本地服务器
Starting up http-server, serving ./
Available on:
http://192.168.43.222:8080 //在同一个局域网下手机连接访问这地址(说白了,就是说手机电脑连接相同的WIFI都可以访问页面的内容)
http://127.0.0.1:8080 //这个IP局限于电脑打开
Hit CTRL-C to stop the server
好了纠结了一天的打包文件终于可以跑起来了
网友评论