vue项目启动与打包简要总结

一、前期准备

1.首先，需要安装nodejs，版本需要与其它同事的保持一致，否则可能出现打包报错的情况；
安装msi格式的nodejs，就可以不用手动配置环境变量。

2.如果有必要，修改npm下载源为公司内网源（如果允许访问外网，可以找cnpm使用淘宝源的方法）

npm config set registry http://www.xxx.com/group

npm config get registry

3.从git上下载完项目后，需要在项目文件夹中打开cmd，使用npm install命令，下载相关依赖包node_modules。

二、确认package.json文件

1.确认项目中的package.json文件，其中有个scripts字段，不同项目可能配置的不一样。
(1)可能是这样配置的：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

这样的，是默认配置，可以使用npm run serve启动项目，使用npm run build打包项目。

(2)可能是这样配置的：

  "scripts": {
    "compile": "cross-env SERVER_ENV=test node build/dev-server.js",
    "build": "cross-env SERVER_ENV=test node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "qs": "node ./build/inquirer && npm run compile"
  },

这样的，就是自定义了启动命令与打包命令，使用npm run compile启动项目，使用npm run build打包项目，需要注意：

其中自定义了一个全局变量SERVER_ENV，前端代码中会读取这个值，当前是test，表示是测试环境；如果打生产环境的包，就需要改为prod。（这个是本人的前端项目的自定义配置，只是个例子，不同项目配置不一样）

(3)可能是这样配置的：

  "scripts": {
    "test": "node ./build-test",
    "prod": "node ./build-prod"
  },

这样的，也是自定义了命令，在项目根路径下，还有build-test.js与build-prod.js这2个文件；
当执行npm run test时，执行的就是build-test.js，会打测试包到dist文件夹里；
当执行npm run prod时，执行的就是build-prod.js，会打生产包到dist文件夹里。

注意：
build-test.js与build-prod.js是自己创建的js文件，其中包含具体的打包命令逻辑；
npm run test与npm test命令相同，都是执行package.json的scripts为test的逻辑。（npm test是npm run test的简写；npm run xxx 格式的命令就是执行scripts里的命令）

三、本地启动前端项目

以默认的package.json文件为例，启动命令就是npm run serve，启动后，cmd窗口会显示出启动的端口号，就可以打开浏览器访问了，需要注意访问的路径。

以本人的前端项目mobile-project为例：

1.可能会有一个E:\mobile-project\config\index.js文件，其中配置了部分访问路径，web-test，以及端口，10001。

module.exports = {
  build: {
    env: prodEnv,
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath,
    productionSourceMap: false,
  },
  dev: {
    env: devEnv,
    port: 10001,
    assetsSubDirectory: 'static',
    assetsPublicPath:
      process.env.SERVER_ENV === 'test'
        ? '/web-test/'
        : '/web/',
    proxyTable: {
      api: {
        filter: '/basic-api/**',
        changeOrigin: true,
        target,
        onProxyReq(proxyReq) {
          proxyReq.setHeader(
            'Cookie',
            `SESSION=6b1c342d-5113-41cf-b566-332f6d68fa52`
          )
        },
      },
    },
    cssSourceMap: false,
  },
}

2.假设有一个文件夹：

E:\mobile-project\src\modules\user\user-config

其中有3个文件：

app.vue
main.js
tmpl.html

3.此时，访问以下url，就是访问到了user-config文件夹里的页面：

http://localhost:10001/web-test/user/user-config.html?user=abc&sign=78d583f0176cd6b05ed92f225a88b

注意：
(1)10001是本人前端项目启动后的端口
(2)web-test是配置的前缀路径
(3)/user/user-config.html访问的就是user/user-config文件夹下的文件，先加载main.js文件，然后加载app.vue文件（这个就是vue框架实现的）
(4)user与sign参数，用get形式传递，在app.vue代码中是可以获取到的；app.vue获取参数样例如下：

import param from '@utils/url-param'
const user = param('user')
const sign = param('sign')

这样，app.vue后续代码就可以用传入参数的值了。

四、前端项目打包

以默认的package.json文件为例，打包命令就是npm run build，执行完毕后，一般都会把打好的前端项目生成到dist文件夹中。

前端项目发版的话，一般就是把dist文件夹及其中的内容、直接放到服务器上指定位置即可。（然后配合nginx就可以访问到了）