一、前期准备

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.jsbuild-prod.js这2个文件;
当执行npm run test时,执行的就是build-test.js,会打测试包到dist文件夹里;
当执行npm run prod时,执行的就是build-prod.js,会打生产包到dist文件夹里。

注意:
build-test.jsbuild-prod.js是自己创建的js文件,其中包含具体的打包命令逻辑;
npm run testnpm test命令相同,都是执行package.jsonscriptstest的逻辑。(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就可以访问到了)

Logo

前往低代码交流专区

更多推荐