vue-webpack 做出来的项目部署到服务器上,点开是空白页(我这里把项目发布到git上)
2017-09-22 18:17
1106 查看
总结1: 从网上下的很多demo,用npm run dev 就可以启动项目,比如:vue-cli,为什么?因为vue-cli自动帮我们安装了express服务器。
总结2: npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生产环境里就不该存在npm,甚至nodejs也不需要(用nodejs来做web静态服务的除外)。意思就是npm这些东西和服务端的部署没有一点关系!
1.迟迟不敢动vue-webpack
因为本地使用vue-webpack开发时(使用的vue-cli,人家都配好了),本地还要运行npm run dev ,我就想着,这要是部署到服务器上,不也得npm run dev??
看了http://www.cnblogs.com/zhuzhenwei918/p/6866094.html,这篇神作,才明白,不是我以为的就是我以为的!
其实只要把本地npm run build 出来的dist文件夹下的static文件夹和index.html,上传到服务器就行了。
是的你没看错,dist这个文件夹就是npm run build 这个命令出来的,不信你删了dist文件夹,执行一次 npm run build。
好了,上传上去了,打开git发布好的地址。https://chenguangliang.github.io/vue-webpack-deploy/ (别用谷歌浏览器在git仓库中找这个地址,不显示)
什么?空白页!看到comsole里的错,肯定是路径出问题了。
是的,路径中少了一个vue-webpack-deploy 路径,
解决办法:
1.手动改index.html
2.在config中的index.js下修改webpack配置:记住是修改 build 里的下面这些参数,不是 dev 里的这些参数
再打开!好了!
当然,如果你还用到了vue-router
要在router的配置中加上
http://www.cnblogs.com/zhuzhenwei918/p/6866094.html
总结2: npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生产环境里就不该存在npm,甚至nodejs也不需要(用nodejs来做web静态服务的除外)。意思就是npm这些东西和服务端的部署没有一点关系!
1.迟迟不敢动vue-webpack
因为本地使用vue-webpack开发时(使用的vue-cli,人家都配好了),本地还要运行npm run dev ,我就想着,这要是部署到服务器上,不也得npm run dev??
看了http://www.cnblogs.com/zhuzhenwei918/p/6866094.html,这篇神作,才明白,不是我以为的就是我以为的!
其实只要把本地npm run build 出来的dist文件夹下的static文件夹和index.html,上传到服务器就行了。
是的你没看错,dist这个文件夹就是npm run build 这个命令出来的,不信你删了dist文件夹,执行一次 npm run build。
好了,上传上去了,打开git发布好的地址。https://chenguangliang.github.io/vue-webpack-deploy/ (别用谷歌浏览器在git仓库中找这个地址,不显示)
什么?空白页!看到comsole里的错,肯定是路径出问题了。
是的,路径中少了一个vue-webpack-deploy 路径,
解决办法:
1.手动改index.html
<script type="text/javascript" src="./static/js/app.js"></script> 或者 <script type="text/javascript" src="/hot/static/js/app.js"></script> 推荐这样的方式,可以保正在vue-router生成的url下也不出现问题
2.在config中的index.js下修改webpack配置:记住是修改 build 里的下面这些参数,不是 dev 里的这些参数
assetsPublicPath: './' 或者 assetsPublicPath: '/hot/',
再打开!好了!
当然,如果你还用到了vue-router
要在router的配置中加上
export default new Router({ mode: 'history', base: '/hot/', //加上这一行
http://www.cnblogs.com/zhuzhenwei918/p/6866094.html
相关文章推荐
- Vue-router+webpack单页项目服务器部署(nginx)
- 为什么vue+webpack需要用到node,如何部署项目到服务器?
- Vue项目webpack打包部署到服务器
- Vue项目webpack打包部署到服务器的实例详解
- vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码
- vue-cli的webpack项目,webpack-hot-middleware热加载热部署有时候不刷新页面
- Vue项目webpack打包部署到Tomcat,刷新报404错
- 使用Eclipse发布Web项目并部署到Tomcat服务器
- webpack打包vue 部署后空白页 图片不显示
- Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
- 部署一个完整的vue webpack项目
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- Vue2.0+Webpack项目环境构建到发布
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- 用myeclipse将web项目发布到指定目录(服务器/自定义目录(如虚拟目录)),及web项目的部署(发布)流程
- 【Web前端】Vue.js项目部署到服务器
- nginx配置vue-router+webpack项目部署访问刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- Vue项目webpack打包部署到Tomcat
- 自动化发布项目之jenkins + git + maven 自动化部署一个web项目