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便可访问该项目了。

你可能感兴趣的:(Vue)