npm run bulid 打包 vue 项目并在 tomcat 服务器运行

vue-cli 的 npm run bulid 指令打包 vue 项目。

（详细分析：Vue -- vue-cli(vue脚手架) npm run build打包优化： http://www.cnblogs.com/donghuang/p/10042812.html）

前提条件：node.js、webpack 以及 vue-cli 和 vue 都已经安装好。我使用的是 npm 方法安装的 vue。

安装好的 vue 是一个具备初始框架的原始 vue 项目。（因为使用npm 方法安装vue 时，使用了 vue init webpack firstApp 来初始化了 vue 项目）

（npm 安装vue 教程：https://blog.****.net/m0_37479246/article/details/78836686）

输出配置(output)

webpack.base.config.js 文件

入口文件配置：entry

• app: './src/main.js' 设置入口文件

 entry: {
    //设置 main.js 作为项目的入口文件
    app: './src/main.js'
  }

打包后文件配置：output 

• path：打包好的文件放置的路径（例子中的文件路径为 ‘dist’）
• filename: 打包后的文件名

output: {
    // path.resolve用来拼接文件多级目录
    // __dirname 为当前文件所在全路径地址
    path: path.resolve(__dirname,'dist'), 
    // 输出文件名字
   // filename: 'app.js', 
    // 以key作为文件名输出
    filename: '[name].js',
    // chunkhash 根据文件内容生成特点的hash，使用这个可以保证文件内容不变，那么文件名字就不会改变，可以用来作为热更新
    chunkFilename: '[chunkhash].js'
}

 

 

运行 npm run bulid 指令打包

配置好出口后，打开 cmd  窗口，切换到 vue 项目目录下，运行以下指令

npm run bulid

 

PS: 这里给大家介绍一个小技巧，以方便快速地打开cmd, 并定位到当前目录。按住Shift键的同时在当前文件下右击，在弹出的菜单中选择"在此处打开命令窗口"即可

打包好的文件放置在服务器上运行

打包后，可以在项目的 dist 文件夹下找到打包好的文件

 

服务器这边，tomcat-webapps 新建一个项目文件夹（名称自定义。这里我命名为 vue-test）

把dist 文件下的所有文件，放置在项目文件夹vue-test下

启动tomcat服务器

在浏览器访问项目地址

项目运行正常，表示打包成功

---

 PS:

问题：在 tomcat 服务器运行打包的项目时，项目部分文件加载不出，有些 js 文件404 报错

原因：打包后的项目入口文件访问其他文件的路径设置不对

这段代码意思是在生产环境下，项目中的入口文件与项目中的其他文件的访问路径为 config.build.assetsPublicPath

这个 config.build.assetsPublicPath 可以在 index.js 找到

这里 config.build.assetsPublicPath 设置值为  ' '，表示打包后的项目入口文件访问其他文件的路径前缀为，为相对路径（基于项目入口文件所在文件夹级别开始）；

如果config.build.assetsPublicPath 设置值为  '/' ，表示打包后的项目入口文件访问其他文件的路径前缀加上'/'，为绝对路径（基于这个项目文件夹在服务器的所在文件夹级别开始）

推荐设置为 ' '，也就是设置为相对路径，更为灵活

---