vue项目笔记（31）-项目打包上线

项目打包上线

1、在项目终端中运行以下命令

npm run build

2、此后，项目会增加dist文件夹，该目录代码就是最终要上线的代码。

3、复制dist文件夹，交于后台开发人员，将代码放到后端的服务器上。

4、放置在后端的根目录下，也可以放置在指定的目录下。如果要放置在指定的目录下，我们需要在前端的config/index.js文件中做如下配置：

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/', //修改此处的目录projectassetsPublicPath: '/project'
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }

此时，项目已经放置到了后端的project文件夹下了。

5、重新运行npm run build，生成新的dist文件夹。

6、修改dist为project，放置到后端的根目录下。

7、在浏览器地址栏输入：localhost/project便可访问该项目了。