到这里vue的所有平时使用的知识点都写完了
先补充一下vue2.x的安装
## 全局脚手架
npm install vue/cli -g
## 查看版本
vue --version
## 新建项目
vue init webpack 【name】
2.x是有vue-router的,但是vuex和axios自己安装
3.x有vue-router和vuex,axios自己安装
vue2.x是没有自定义的==vue.config.js==配置文件的,他的配置文件是==config/index.js==,他的proxy代理配置也在这个文件的dev对象里,默认有个proxyTable的空对象
vue2.x写代码放静态文件都固定放在static文件夹里,放在别的地方找不到
vue2.x打包还有两处需要修改的地方
// config/index.js
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
// 这里原来是assetsPublicPath: '/', 改成
assetsPublicPath: 'dist',
...
}
// 如果那天我想把打包文件夹改了,改两个地方
// assetsRoot: path.resolve(__dirname, '../xx'),
// assetsPublicPath: 'xx',
// build/utils.js 的47行
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
// 这里加上
publicPath:'../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
这样vue2.x(查看vue-cli有3.x的配置)的配置就一样了
打包
如果你是用webStrom开发工具,可以直接打开==package.json==文件,左边的绿色箭头直接点击就行
dev就是vue2.x的本地开发启动,build就是vue2.x的打包命令
serve就是vue3.x的本地开发启动,build就是vue3.x的打包命令
只要执行了打包,等程序执行完,就会在项目的一级目录出现一个新的文件夹,默认叫==dist==,修改别的打包名字,查看上面的配置
部署
因为前面已经把跨域都搞定了,现在只要找个服务器把打包的文件放进去就行,常见的,最小白的服务器有nginx,可以直接在网上下载安装包
解压完nginx的安装包之后,把dist文件放在html文件夹里,然后双击启动nginx.exe,然后打开浏览器访问【http://localhost/dist】就可以了,可以同时部署无限个项目的,如果有购买外网云虚拟机,去云虚拟机上安装一个nginx,也是放进去直接把打包文件夹放进去,然后开启nginx服务,访问【http://外网ip或域名/打包文件夹名字】
到这里,所有的开发都进行完了,如果想要配置二级域名,可以查看nginx分类
题外话SSR
vue还有一个ssr的东西,就是说vue第一次加载会把整个项目加载下来,一般都是几个m,太慢,所以要做一点加速留住用户,然后就提出了ssr,首屏服务器渲染技术,个人认为这好不容易前后端分离了,又强行服务器渲染,没必要浪费时间去研究
插件有两个,一个是VUE-SSR
,一个是Nuxt
原文地址:https://www.cnblogs.com/pengdt/p/12046424.html