Vue-cli3从环境部署到打包上传到服务器_vue3 打包项目部署到服务器

安装node.js

首先检查电脑是否安装node.js以及版本
官方建议，node.js的版本，需要是8.9或者以上（建议是8.11.0+）

检查方法:

1.首先打开cmd, win+r输入：‘ cmd ’ , 回车；
2. 在cmd输入node -v,回车,第一张表示未安装，第二张图片为已安装V后面是版本号;
3. 如果你已安装请下滑到搭建cli3环境；
4. 推荐官方下载，由于官方太慢作者提供了node-v10.16.3-x64.msi
5. 一直下一步到安装完毕,然后打开cmd输入node -v查看是否显示版本号
6. 安装淘宝镜像（因为npm较慢推荐安装淘宝镜像之后使用cnpm代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建cli3

全局安装：npm install -g @vue/cli
检测是否安装正确：vue --version
创建项目：vue create admin(admin是目录名修改成自己的项目名)
例子:在d盘cli3文件夹下创建文件名为admin的项目 f:回车;cd cli3回车;vue create admin回车；
注：使用默认配置一直回车即可,手动配置请看官方文档
使用cnpm/npm下载成功后输入 cd admin 进入项目文件夹（admin改成自己的项目名）
输入vue ui 回车 等待进入管理页面

1.点击左上角箭头指向地方选择刚才创建的项目
2.点击任务
3.点击server
4.点击运行

到这开发环境部署就全部完成啦，快去开发属于自己的项目吧！

项目打包

各位帅哥，美女们开发完自己项目可能有疑问了，写完自己的项目如何部署能，怎么打包上传到服务器上，作者也刚刚找到一种办法，支持萌新（求大佬别喷，刚入门测试可以占时先使用）

1.在项目根目录下创建vue.config.js

module.exports = {

    /* 部署应用包的基本URL */
    /* baseUrl 从 Vue CLI 3.3 起已弃用 ，请使用publicPath */
    //  baseUrl: process.env.NODE_ENV === "production" ? "./" : "./",
    publicPath: process.env.NODE_ENV === "production" ? "./" : "./",

    /* 生产环境构建文件的目录 defalut: dist */

    outputDir: "dist",

    /* 放置生成的静态文件目录（js css img） */

    assetsDir: "static",

    /* 指定生成的index.html 输出路径 相对 default: index.html */

    indexPath: "index.html",

    /* 指定生成文件名中包含hash default: true */

    filenameHashing: true,

    /* 多页模式下 */

    /* pages: {
  
      index: {
  
        // page 的入口
  
        entry: "src/index/main.js",
  
        // 模板来源
  
        template: "public/index.html",
  
        // 在 dist/index.html 的输出
  
        filename: "index.html",
  
        // 当使用 title 选项时，
  
        // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  
        // title: "Index Page",
  
        // 在这个页面中包含的块，默认情况下会包含
  
        // 提取出来的通用 chunk 和 vendor chunk。
  
        chunks: ["chunk-vendors", "chunk-common", "index"]
  
      },
  
      // 当使用只有入口的字符串格式时，
  
      // 模板会被推导为 `public/subpage.html`
  
      // 并且如果找不到的话，就回退到 `public/index.html`。
  
      // 输出文件名会被推导为 `subpage.html`。
  
      // subpage: "src/subpage/main.js"
  
    } */

    /* 是否保存时 lint 代码 */

    lintOnSave: process.env.NODE_ENV === "production",

    /* 是否使用编译器 default: false */

    runtimeCompiler: false,

    /* 默认babel-loader会忽略node_modules中的文件，你想显示的话在这个选项中列出来 */

    // transpileDependencies: [],

    /* 生产环境的source map */

    productionSourceMap: true,

    // crossorigin: "",

    integrity: false,

    configureWebpack: {
        resolve: {
            alias: {
                'assets': '@/assets',
                'components': '@/components',
                'views': '@/views',
            }
        }
    },

    // css相关配置
  
    css: {

        // 是否使用css分离插件 ExtractTextPlugin

        extract: true,

        // 开启 CSS source maps?

        sourceMap: false,

        // css预设器配置项

        loaderOptions: {},

        // 启用 CSS modules for all css / pre-processor files.

        modules: false

    },

    devServer: {

        port: 8080,

        host: "0.0.0.0",

        https: false,

        // 自动启动浏览器

        open: false,

        proxy: {
            "/api": {
                //代理路径 例如 https://baidu.com
                target: "https://baidu.com",
                // 将主机标头的原点更改为目标URL
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }

    }

};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

2.打开cmd进入项目目录输入npm run build 打包

3.打开生成的dist文件夹把里面部署到服务器根目录即可

全部结束啦，欢迎大佬指点吐槽，作者刚接触写的不对的地方请大佬们指出，作业会尽快更改。
下面附上本人打包的后台admin未完善
后台预览地址