网址:http://www.tsm1.cn/jmm/dist/index.html
项目技术:vue全家桶+elementUI,用vue-cli 2.x搭建环境
开发流程:需求分析–接口文档–模块开发–npm run build
打包–利用ftp可视化工具上传到服务器
问题一:vue如何引用腾讯地图
看博客发现了五花八门的写法,后来转向腾讯地图的官方文档。
解决方如下:
1、在Src文件夹下创建TMap.js
export function TMap (key) {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(qq)
}
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'http://map.qq.com/api/js?v=2.exp&callback=init&key=' + key
script.onerror = reject
document.head.appendChild(script)
})
}
2、在map.vue中引入,注意TMap()里传入的是自己的key值。
import { TMap } from '@/TMap.js'
mounted () {
TMap('OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77').then(qq => {
var center = new qq.maps.LatLng(39.916527, 116.397128)
var map = new qq.maps.Map(document.getElementsByClassName('myp')[0], {
// 地图的中心地理坐标。
center: center,
zoom: 8
})
// 创建marker
var marker = new qq.maps.Marker({
position: center,
map: map
})
})
问题二:vscode如何将项目通过ftp连接部署到服务器
1.首先下载插件ftp-sync
2.安装之后,Ctrl+Shift+P命令,输入ftp-sync:Init 点击确定。
3.进入ftp-sync.json配置文件,需要配置标红的几项,
remotePath 要上传文件的远程站点的目录
ftp默认端口是21 sftp的默认端口是22
4.在vs中使用,选择ftp-sync:upload file 就可以直接上传到远程站点了。
5.检查是否上传成功。
问题三:vue项目如何上传到服务器
我用的是ftp可视化工具。
问题四:vue项目上传到服务器后打开页面出现空白页
- 打包后的dist目录下的文件引用路径不对,会因找不到文件而报错导致白屏。
修改config–index.js中的路径问题
修改dist下的index.html文件
build–util.js,新增红色框内容
build文件下的webpack.prod.conf.js文件下添加内容:
2.由于把路由模式mode设置成history了,默认是hash。
解决方法:路由里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。
所以只要删除mode或者把mode改成hash就OK了。
3.在项目中使用了es6的语法,一些浏览器不支持es6,造成编译错误不能解析而造成白屏
解决方法:- 安装 npm install --save-dev babel-preset-es2015
- 安装 npm install --save-dev babel-preset-stage-3
- 在项目根目录创建一个.babelrc文件 里面内容 最基本配置是:
{
// 此项指明,转码的规则
"presets": [
// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
["env", { "modules": false }],
// 下面这个是不同阶段出现的es语法,包含不同的转码插件
"stage-2"
],
// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中,不产生注释
"comments": false,
// 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
"env": {
// test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}
问题五:vue项目打开后样式错乱
我试过了加scoped,真的是坑人!!样式更乱了,正确方法:
1、更改main.js文件的引入顺序
2、找出/build/webpack.prod.conf.js文件的代码(如下),然后直接注释掉就可以了:
此项目让我熟悉了vue开发整个流程,对vue的知识点又了进一步的掌握!
总结完毕,第一次打包部署vue项目,新手上路,如有错误,请指正,谢谢!!