Vue 项目打包 及上线

前言：

项目环境：

开发工具 Vs Code

本文演示项目由 vue-cli 脚手架创建的项目

Vue 2.0  创建项目

vue  init  webpack 项目名

vue init webpack my-project

Vue 3.0  创建项目

vue create 项目名

vue create my-project

Vue 2.0打包

1.  打开项目里面的README.md（或者在其他资料查看相关命令亦可）

# admin

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# 启动项目
# serve with hot reload at localhost:8080
npm run dev

# 打包项目
# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test
```

2.  项目结构

3.  打开终端，进入到你项目的根目录下

输入打包命令，等待打包完成

npm run build

打包完成

4.  查看生成的 dist 文件

 

此时 打开的 index.html 文件是空白的，原因是资源的路径问题

页面空白解决方法

1.  找到 config目录下的  index.js 文件

2.  将里面的内容修改为如下：

其实就是在路径前面 加上    ./

./  当前目录    ../    上一级目录

3. 再次打包后打开index.html文件

页面出来了，但是静态资源（例如背景图）没出来。

4.  修改配置文件，解决图片显示不出来

在 utils.js 里面添加如下代码：

publicPath: '../../'

修改之后的效果：

另外，我有碰到过修改配置之后，背景图能够显示，但是html标签不显示。查找之后发现是透明度的问题。

在样式中，我使用了透明度 

 opacity: 92%;

这样的使用方式，在打包之前是可以使用的，打包之后检查却发现莫名变成了  1%。

解决办法：

修改为小数即可。

 

Vue 3.0 打包

1.  打开项目里面的README.md

# order_admin

## Project setup
# 安装第三方库（插件）
```
npm install
```

# 启动项目
### Compiles and hot-reloads for development
```
npm run serve
```
# 打包项目
### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

2.  项目结构

vue 3.0 没有 build 、config 文件夹

3.  在项目的根目录下创建  vue.config.js文件    根目录 根目录 根目录！！！！

内容如下：

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'  // 打包环境
    //   ? '/production-sub-path/'
       ? './' 
       : '/',
         
    // 相对路径
    // baseUrl: './',   --这里必须注释掉，否则会报错，某位博主这里是需要的，但是我在打包过程中是不行的。
    // 输出文件目录 
    outputDir: 'order_admin',    //修改为你自己的项目名
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false, //关闭eslint
    // use the full build with in-browser compiler?
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    // compiler: false,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {},
    // vue-loader 配置项
    // https://vue-loader.vuejs.org/en/options.html
    // vueLoader: {},
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,//代码可读性
    // css相关配置
    css: {
     // 是否使用css分离插件 ExtractTextPlugin
     extract: true,
     // 开启 CSS source maps?
     sourceMap: false,
     // css预设器配置项
     loaderOptions: {},
     // 启用 CSS modules for all css / pre-processor files.
     modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // 是否启用dll
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
    // dll: false,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
      open: process.platform === 'darwin',
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null, // 设置代理
      before: app => {}
     },
    // 第三方插件配置
    pluginOptions: {
     // ...
    }
   }

4.  执行打包命令

npm run build

打包之后会多出一个文件夹

打开index.html 后发现页面还是空白。

分析原因：

1.   静态资源找不到

2.   路由问题

我在打包过程中，没有遇到静态资源找不到的情况。所以考虑路由问题，为了方便，我们不修改后台代码。

解决方法

找到 router文件下的 index.js文件，就是平时配置路由的文件

可选值: “hash” | “history” | “abstract”

将  mode : 'history'  修改为   mode: 'hash'  即可

5.  配置好之后重新打包即可。

以上就是关于 vue 打包。接下来以 Tomcat 9 为例，上传项目。

将打包好的项目文件夹复制到 Tomcat 下一个叫 webapps下即可。

启动Tomcat，在浏览器访问。

 

Windows 到Tomcat 官网下载解压即可使用。

Ubuntu 安装 Tomcat 9:

https://blog.csdn.net/LZW15082682930/article/details/113760086?spm=1001.2014.3001.5501

至此，vue 打包讲解完成，如果有其他的打包方式，欢迎大家交流学习。