记一次vue开发经验小结

虽然已经不是第一次使用vue开发前端,但是这次是第一完完全全从零开始的,部署的时候遇到一些问题,在这里记录一下。

一、除去路径中的“#”

      正常情况下,需要把 router文件夹下index.js 中mode值改为“history”就可以了,没有的话就加上

记一次vue开发经验小结_第1张图片

但是,这样就会用一个新问题,刷新页面的时候会出现404的情况,这种情况官方也提到了,解决办法

二、部署时访问地址非根目录

我使用nginx作为web服务器的,如果直接用域名或IP访问页面的话,直接配置一下dist路径即可

        location / {
            root   /usr/local/nginx/www/app;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

如果访问地址非根目录的话,比如:https://kengni.shiyi.com/app,就需要更改一下几个地方:

 1)assetsPublicPath

记一次vue开发经验小结_第2张图片

2)路由添加基础路径

记一次vue开发经验小结_第3张图片

3)修改nginx配置

		location /app {
		   alias /usr/local/nginx/dist;
                   index  index.html index.htm;
		   try_files $uri $uri/ /index.html;
        }

三、源码暴露问题

正式打包发布时需要设置productionSourceMap为false,否则你的源代码就可以通过浏览器的开发者工具看到了,这个真不能忍

记一次vue开发经验小结_第4张图片

没了

你可能感兴趣的:(前端)