vue项目打包及查看_vue怎么查看项目中设置的打包命令

关于vue项目打包后的两种显示方式：
打包命令：npm run build
1.不做任何配置，执行打包命令后，会生成如下dist文件

2.需要打包成静态资源文件
①在项目根目录新建一个vue.config.js文件
②写入下面配置项

module.exports = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ 
    /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
    publicPath: './',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: './dist',
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: "static",
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: false,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

③执行npm run build
打包后dist文件如下：

最后，打包后如果需要在查看页面，则需要使用http-server开启一个本地服务器
①先全局安装http-server

npm install http-server -g
1

②进入要查看的项目，然后在终端输入

http-server -c-1
1

出现下图表示服务器开启成功

然后进入打包好的dist文件夹，点击index.html文件，即可查看到正常页面。
注意：想查看页面的话，router中的index.js里需要将mode设置为hash模式（history模式需要后台配置的）