您的位置:首页 > 产品设计 > UI/UE

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

<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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: