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

分手后的思念是犯贱 2024-03-31 16:00 101阅读 0赞

## 一、前期准备 ##

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就可以访问到了）