#1. 打包:(运行后会生成dist文件夹)
npm run build
2.发布:
####(1)方式一(简单)
使用静态服务器工包
npm install -g serve
运行dist文件夹
serve dist
访问:http//localhost:5000
注:服务器打开时再运行dist文件
#####(2)方式二(不推荐)
具体步骤如下:
1、查看package.js文件的scripts命令
2、打开webpack.dev.conf.js文件,找到 publicPath: ‘/xxx/’ //打包文件夹的名称
按Ctrl点击,跳转到index.js文件
3、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./’,即“/”前加点。
4、终端运行 npm run build 即可。
此时点击index.html,通过浏览器运行便,会发现动态绑定的static的图片找不到,故static必须使用绝对路径。
将图片路径修改为绝对路径,至此,打包完成。
#本地模拟服务器:(在本地查看打包后的效果)
http-server的安装和使用:(本地模拟服务器)
Http-server是一个轻量级的基于nodejs的http服务器,它最大好处就是:
可以使任意一个目录成为服务器的目录,完全抛开后台的沉重工程,直接运行想要的js代码。
安装
npm i -g http-server
运行
在要成为服务器的目录下运行如下命令
cd dist //进入目录
http-server
若要禁用缓存,请使用如下命令运行
http-server -c-1
(服务器打开之后再运行dist文件)
运行后在浏览器输入http://localhost:8080/或者·http://127.0.0.1:8080就可以打开目录
例:
PS C:\Users\1080\Desktop\云组态0421> npm run build
PS C:\Users\1080\Desktop\云组态0421> cd dist
PS C:\Users\1080\Desktop\云组态0421\dist> http-serve