1. 第一步进行VUE项目打包操作
打包vue之前我们需要设置下项目的几处地方
1、在build/utils.js文件中修改
if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath:'../../', // 添加的代码fallback: 'vue-style-loader'})}
2、在config/index.js中修改
build: { //构建版本// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: './static',assetsPublicPath: './',
3、在src/router/index.jsz中设置mode为history
4、在命令行中输入 npm run build,命令行中出现如下所示即可
出现这样的字,代表打包成功了。当然你在本地是不到dist/index.html文件的。
需要部署在服务器上,
如需要在打包后打开index.html文件
请将mode:‘history’去掉,用vue自带的路由(这样会在地址栏出现#)
2.部署IIS
简单来说把dist文件放到服务器的某个文件中分配号端口号后,在防火墙哪里打开端口。就可以进行简单的访问了
一直下一步
这个时候,你就可以用IP加端口访问网站了。访问之前得先启动网站
成功登录进去后,点击目录报404得错误,这个时候就成功一半了。我们来重写下url路由
URL重写
第一步,下载插件URL Rewrite(如果有请忽略)
(我用得是手动下载插件,没有安装web平台安装程序,因为太慢了)
2、进行URL重写
点击应用。成功解决问题!!!!!
以上都来自本人亲自测试。
关于有关IIS history模式部署网站原文作者文章
点击前往
以上如果不成功得话
去掉URL重写
然后在config/index.js中修改