基于vue-cli脚手架打包vue项目注意事项

责编:menVScode 2017-12-14 17:50 阅读(2048)

        一、路劲

        vue项目(基于vue-cli脚手架)开发完成后,需要将开发环境的代码打包成可上线的代码。打包指令:

npm run build

        打包完完成后会生成dist文件夹,内部包含index.html和静态文件。黄字提示我们打包好的文件只能在服务器环境下运行,直接运行index.html文件是无效的。

QQ截图20171214163622

        通过appserv(下载地址:http://menvscode.com/detail/5a333056a7833e528ca883d8)搭建服务端环境,可以在本地运行打包好的文件。把dist文件夹放在appserv安装好的www文件下,由于appserv默认www目录是其的根目录,所以无法打开dist文件夹项目(因为内部css/js文件引用路劲问题,想要运行成功需要将dist文件夹的文件复制到www文件夹下)。

        QQ截图20171214180026

        我们需要在打包前将路劲重新配置好:/config/index.js

        修改前代码:

'use strict'
const path = require('path')

module.exports = {
  dev: {
        ...
  },

  build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'), // 在根路劲下生成dist文件夹
    assetsSubDirectory: 'static', // 在dist目录下生成静态文件
    assetsPublicPath: '/', // 公共路劲,配置服务器上的路劲
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

QQ截图20171215105719

 assetsPublicPath: '/' 改成如下所示,然后重新打包。

assetsPublicPath: '/dist/',

QQ截图20171215110250


        二、apache配置

        问题现象:vue项目是一个单页应用,访问的只有一个页面,但是项目放到服务器环境(apache)的时候,就会出现问题。比如在浏览器中直接输入某个路劲 (http://localhost/doc),然后会出现页面找不到。

QQ截图20171215132350

        这是因为apache在访问的时候,是按路劲来寻找文件的;比如 http://localhost/doc,它会在www文件根目录下寻找 doc 文件。现在我们要做的是如果没有找到文件的话,就统一的指向index.html,其内部就能访问js文件,js文件里面就有路由的代码统一管理路劲。

        配置apache步骤

        1. 释放mod_rewrite模块,在apache配置文件中找到 httpd.conf,我的目录是D:\software\AppServ\Apache24\conf。

// 将mod_rewrite模块释放出来,去掉前面的 # 即可
LoadModule rewrite_module modules/mod_rewrite.so
// 将 AllowOverride none 改为  AllowOverride all
<Directory />
    AllowOverride all
    Require all denied
</Directory>
<Directory "D:/software/AppServ/www">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks
    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   Options FileInfo AuthConfig Limit
    #
    AllowOverride All
    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>

        2. 配置 .htaccess文件,需要放在根路劲下。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /dist/index.html [L]
</IfModule>

        3. 改完apache配置后需要重启apache。

        具体其他环境下的配置可访问:https://router.vuejs.org/zh-cn/essentials/history-mode.html


        三、vue项目打包后在ie下报错 “Promise”未定义

        因为IE系列浏览器不支持JS的一些高级特性,因此我们需要借助 babel-polyfill 来实现高级特性转换。安装 babel-polyfill:

npm install babel-polyfill -save

        由于要用其做语法转换,所以要确保improt 'babel-polyfill'是在main.js的第一行。

标签: vue-cli vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码