vue打包部署（含2.0）

Posted 2021-03-22 pengdt

到这里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